简体   繁体   English

Ajax POST请求不起作用

[英]Ajax POST request does not work

I don't know what I am doing wrong, but all looks good. 我不知道自己在做什么错,但是看起来都不错。 I am working on localhost and I am having trouble trying to load a file. 我在localhost工作,尝试加载文件时遇到麻烦。

This is my code. 这是我的代码。 I am working in NetBeans and console is clear without any errors. 我在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>

When I execute this code, I get no results. 当我执行此代码时,没有任何结果。

As some of the comments suggest - you need to look in the error console of the Browser. 正如一些评论所建议-您需要在浏览器的错误控制台中查看。 NOT NETBEANS. 不是网民。 Also, understand how to set breakpoints in JS, etc. 另外,了解如何在JS等中设置断点。

Below is an example of what you are trying to achieve using jQuery which is much simple than using pure Javascript. 以下是您尝试使用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>

You can find more information on jQuery here: http://api.jquery.com and more specifically on jQuery's AJAX functions here - http://api.jquery.com/jQuery.ajax/ 您可以在这里找到有关jQuery的更多信息: http : //api.jquery.com ,更具体地说是在此处了解jQuery的AJAX函数-http: //api.jquery.com/jQuery.ajax/

i found that your code is actually designed for GET method.And in this case is not important to use POST instead of get.(because no parameter is passed and also its not a form..) and also agrees to @Jackson 我发现您的代码实际上是为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>

In between your .open() and .send() invocations, set your request header like so: 在.open()和.send()调用之间,如下设置请求标头:

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

At least, that's how you'd do it if you didn't want to use jQuery. 至少,如果您不想使用jQuery,那将是您要这样做的方式。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM