【问题标题】：No data displaying with this ajax request on a php page在 php 页面上没有显示此 ajax 请求的数据
【发布时间】：2014-08-29 13:17:15
【问题描述】：

总结

我正在尝试使用 ajax 在 PHP 页面上显示数据，以向单独的 PHP 页面发送请求，该页面连接并从 mysql 数据库中提取数据。最终结果应该是用户单击一个按钮，并且无需刷新，数据库中的数据就会显示在同一页面上。

文件

显示数据.php

这是客户看到并显示数据的页面。

getData.php

这是连接到 MySQL 数据库并提取数据的部分。

app.js

这是发出 ajax 请求的地方。

我的问题

目前，当我运行我拥有的代码时，我单击要调用 ajax 请求的按钮，页面刷新显示没有数据。

我已经运行它并使用了 Inspect Element，发现请求已成功发送，状态为 200，我知道这没问题。在 app.js 文档的顶部，我设置了一个 console.log("app.js found") 来测试该文档是否正在被读取。这显示在 Inspect Element 的控制台中，但我放在函数中的其他 console.log() 不显示。

代码

app.js

function init() {
  document.getElementById("Submit").addEventListener('click', ajax);
}

function ajax() {
  console.log("Function started");
  request = new XMLHttpRequest();
  request.open('GET', 'getData.php', true);
  request.onload = function() {
    console.log(request);
    if (request.status >= 200 && request.status < 400){
      // Success!
      document.getElementById("displayData").innerHTML = request.responseText;
    } else {
      // We reached our target server, but it returned an error
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };
  request.send();
  console.log("Request sent");
}
document.addEventListener('load', init);

显示数据.php

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="app.js"></script>
  </head>
 <body>
   <p class='title'>Presenting udp packet data</p><hr />
   <center><div class='data-window'>
   <form id="getSearchNumber">
     <label for="imei">IMEI of desired devices</label> 
     <select name="imei" id="imei">
       <option value="Alldata">All Data</option>
       <option value="012981000298213">012981000298213</option>
     </select>
     <br />
     <button id="Submit">Submit</button>
   </form>
   <div id="displayData"></div>
 </body>
 </html>

我知道 getData.php 代码运行正常，但如果有人想查看它，请发表评论。

我不认为这是语法错误，而是解决问题的方法错误。

【问题讨论】：

有什么理由不使用 jQuery 吗？
最初我决定不这样做，以真正了解过程中发生的事情。我现在意识到这在我的水平上可能是一个错误，并且已经开始尝试使用 jQuery，但仍然没有运气。我会接受任何一种形式的答案。

标签： javascript ajax

【解决方案1】：

在您的页面中包含 jQuery 并将 <button> 更改为 <input type="button" 只是因为如果您使用它将提交表单。

<html>
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="app.js"></script>
      </head>
     <body>
       <p class='title'>Presenting udp packet data</p><hr />
       <center><div class='data-window'>
       <form id="getSearchNumber">
         <label for="imei">IMEI of desired devices</label> 
         <select name="imei" id="imei">
           <option value="Alldata">All Data</option>
           <option value="012981000298213">012981000298213</option>
         </select>
         <br />
         <input type="button" id="Submit" value="Submit"/>
       </form>
       <div id="displayData"></div>
     </body>
     </html>

把你的 JS 改成

$(document).ready(function(){
    $( "#Submit" ).click(function() {
        $( "#displayData" ).load( "getData.php" );
    });
})

【讨论】：