Question

我不知道我做错了什么，但看起来都不错。我正在处理localhost，我无法尝试加载文件。

这是我的代码。我在NetBeans中工作，控制台很明显没有任何错误。

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST", "demo_post.php", true);
    xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

当我执行此代码时，我没有得到任何结果。

Answer 1

正如一些评论所暗示的那样 - 您需要查看浏览器的错误控制台。不是NETBEANS。另外，了解如何在JS等中设置断点。

下面是一个使用jQuery尝试实现的示例，它比使用纯Javascript简单。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">

   // jQuery allows you to use selectors rather than onClick, etc
   // So when anything with a class called "loadData" is clicked this function will run       
   $(".loadData").click(function (event) {

       $.ajax({
          url: 'demo_post.php',  // The URL that your making the request to
          type: 'POST', // Type - GET or POST
          dataType: 'html', // DataType - can be html, json or jsonp
          cache: false, // true or false - whether you want data to be cached
          data: 'foo=bar', // Any data that your submitting with the request.
          error: function (error_response) {

             // An error has occured so empty your #myDiv and put the error in there.
             $("#myDiv").empty().append(error_response.status);

          },
          success: function (response) {

             // Everything has worked - empty #myDiv and put the replace with response
             $("#myDiv").empty().append(response);

          }
       });

   });

</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" class="loadData">Request data</button>
<div id="myDiv"></div>

</body>
</html>

您可以在此处找到有关jQuery的更多信息：http://api.jquery.com，更具体地说，可以在此处查看jQuery的AJAX函数 - http://api.jquery.com/jQuery.ajax/

Answer 2

我发现你的代码实际上是为GET方法设计的。在这种情况下使用POST而不是get是不重要的。（因为没有传递参数，也不是表单..）并且同意@Jackson

  <!DOCTYPE html>
  <html>
  <head>
  <!--you can use online js file but in here i download the js file from       code.jquery.com/jquery-2.0.3.min.js and kept it in localhost same folder -->
  <script type="text/javascript" src="/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
  function loadXMLDoc()
  {
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
 }
 xmlhttp.open("GET","demo_post.php",true);
 xmlhttp.send();
 }
 </script>
 </head>
 <body>
 <h2>AJAX</h2>
 <button type="button" onclick="loadXMLDoc()">Request data</button>
 <div id="myDiv"></div>

 </body>
 </html>

Answer 3

在你的.open（）和.send（）调用之间，设置你的请求标题如下：

xmlhttp.open("POST", "demo_post.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

至少，如果您不想使用jQuery，那就是这样做的。

Ajax POST请求不起作用

3 个答案: