用 PHP 设置 innerHTML？答案

【问题标题】：Setting innerHTML with PHP?用 PHP 设置 innerHTML？
【发布时间】：2015-02-01 21:38:45
【问题描述】：

所以基本上我有这个程序在页面顶部设置一个标题 (id="infoHeader") 到从另一个站点检索到的一些文本。但是，当按下按钮时，我需要更改此设置。正如您所看到的，它当前使用 PHP 脚本从给定的 URL 获取文本，但是当按下按钮时我需要从不同的 URL 获取。所以基本上

Button1 press -> infoHeader = Site 1 文本

Button2 press -> infoHeader = Site 2 文本

有没有办法使用按钮来更改 [id="infoHeader"] 的 innerHTML 以便它运行 PHP 脚本来获取文本。我有点难以解释，如果您需要我可以尝试提供更多信息。

<!DOCTYPE HTML>
<html>
<head>
    <title>KSA Flight Tracker</title>
    <link rel="stylesheet" type="text/css" href="KSAStyle.css"/>    
</head>

<body>
<div id=page>

    <div id=leftPanel>
        <p id=missionsHeader>Active Missions</p>
        <p><?php include("getList.php")?></P>
    </div>

    <div id=info>
        <p id=infoHeader><?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?></p>
    </div>
</div>
</body>

【问题讨论】：

你可能不得不为此使用 javascript
但是我需要运行这个 PHP 脚本来获取文本，那么我该如何使用 javascript 运行呢？

标签： php html button innerhtml

【解决方案1】：

您需要使用 JavaScript + AJAX。页面加载/渲染后需要 JavaScript 更改 div 的内容，而无需刷新网页即可加载 PHP 文件的 AJAX。

我推荐你使用 jQuery，它是 ajax 函数。

<!DOCTYPE html>
<html>
  <head>
    <title>KSA Flight Tracker</title>
    <link rel="stylesheet" type="text/css" href="KSAStyle.css"/>    

    <!-- include jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

    <script>
      $(document).ready(function() { // wait for the DOM to finish loading

        // button1
        $("#someID").click(function() { // element with id "someID" (your button)
          $.ajax({
            url: "getData.php", // the content of the page which you want to load
            cache: false
          }).done(function(dataFromServer) {
            $("#infoHeader").html(dataFromServer); // set the data from the server (getData.php) as the content of the element with the id "infoHeader"
          });
        }):

        // button2
        // the same as above for the other button

      });
    </script>
  </head>

  <body>
    <div id="page">

      <div id="leftPanel">
        <p id="missionsHeader">Active Missions</p>
        <p> <?php include("getList.php"); ?> </p>
      </div>

      <div id="info">
        <p id="infoHeader"> <?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?> </p>
      </div>
    </div>
  </body>
</html>

针对您的问题：

这里有一些很好的 JavaScript、jQuery 和 AJAX 资源：

JavaScript：https://developer.mozilla.org/en-US/docs/Web/JavaScript
jQuery：http://en.wikipedia.org/wiki/JQuery
jQuery：http://www.w3schools.com/jquery/
jQuery：http://www.codecademy.com/en/tracks/jquery
jQuery + AJAX：http://www.w3schools.com/jquery/jquery_ajax_intro.asp

【讨论】：

我只是对这一切做了一个快速的谷歌搜索，我真的不知道如何做我想做的事。（我昨天才开始使用 HTML、CSS 和 PHP - 我学得很快，但我被卡住了）。那么我将如何使用它来更改带有“ajax”的文本？
好的，所以我尝试阅读this，但我仍然不明白我应该做什么。我把它放在哪里？需要更改哪些内容才能与我的程序一起使用？等等。就像我说的那样 - 我是新手，直到 30 分钟前还从未听说过 AJAX 或 jQuery。
我尝试阅读它们，但它也可能是日文的 - 我只是无法理解它......
用一个例子更新了我的答案。
谢谢，这很有帮助，但我可以通过使用这些词来澄清要更改哪些内容才能使其正常工作。点击检测元素的ID：“someID” |带有函数的文件：“getData.php”| PHP 函数：“getTitle(URL)”|要更改的文本：“infoHeader”|