2013-07-31 150 views
0

我不知道我在做什麼錯,但都看起來不錯。我正在研究localhost,並且在嘗試加載文件時遇到問題。Ajax POST請求不起作用

這是我的代碼。我在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> 

當我執行此代碼時,我沒有得到任何結果。

+6

爲什麼你不使用JQuery的.ajax功能? – boyd

+0

'console.log(xmlhttp)' –

+4

標記爲「jquery」並使用純javascript。 #likeaboss – MightyPork

回答

0

在你。開()和。發送()調用,設置你的請求頭像s o:

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

至少,如果你不想使用jQuery,你會這樣做。

+0

感謝setRequestHeader成爲問題。我修好了 – Jony

0

由於一些評論建議 - 您需要查看瀏覽器的錯誤控制檯。不是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/

0

我發現你的代碼實際上是專爲在這種情況下,GET method.And並不重要使用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>