Question

所以基本上我有这个程序将页面顶部的标题（id =＆＃34; infoHeader＆＃34;）设置为从另一个站点检索的一些文本。然而，当按下按钮时我需要更改。正如您所看到的，它目前使用PHP脚本从给定的URL获取文本，但是当按下按钮时我需要从不同的URL获取。所以基本上

按钮1按 - ＆gt; infoHeader =站点1文本

按钮2按 - ＆gt; infoHeader =站点2文本

有没有办法使用按钮来更改[id =＆＃34; infoHeader＆＃34;]的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>

Answer 1

您需要使用 JavaScript + AJAX 。加载/呈现页面后需要JavaScript来更改div的内容，而无需刷新网页就可以使用AJAX加载PHP文件。

我建议你使用 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>

对于你的问题：

Change content of div - jQuery
http://api.jquery.com/jquery.ajax/

以下是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

用PHP设置innerHTML？

1 个答案: