爲什麼AJAX POST請求不起作用

Question

<script> 
     function postComment() { 
      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("commentHint").innerHTML = xmlhttp.responseText; 
       } 
       var comment = document.getElementById("comment").value; 
       var id = document.getElementById("postID").value; 
       xmlhttp.open("POST", "commentpost.php", true); 
       xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
       xmlhttp.send("comment=" + comment + "&postID=" + id); 
      } 
     } 

    </script> 
    <form> 
     <div id="comment"> 
      <textarea name="comment" id="comment" rows="4" cols="125" style="max-width: 950px; max-height: 140px;" placeholder="<?php echo $_SESSION["name"] ?>, Write Your Comment Here" class="form-control"></textarea><br> 
      <div id="commentHint"></div> 
      <input type="submit" onclick="postComment()" value="Submit Comment" class="btn btn-success btn-sm "> 

      <input type="hidden" id="postID" name="postID" value="<?php echo $post_id ?>"> 

     </div> 
    </form> 

我不知道爲什麼我的AJAX POST請求是不工作... 這裏的POST我相應的PHP文件瓦爾：
$評論= $ _ POST [」評論」];
$ postID = $ _POST [「postID」];

當我點擊提交評論按鈕時，它會首先刷新頁面並將我帶回主頁。它不會觸發php腳本..我是新來的AJAX有人可以告訴我什麼是錯的

Answer 1

您的xmlhttp.send(...)調用是在onreadystatechange處理程序中，爲處理程序方法調用您需要發送請求ajax方法從不執行。

負責發送請求的代碼應該在處理程序方法之外。

function postComment() { 
    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("commentHint").innerHTML = xmlhttp.responseText; 
     } 
    }//need to close onreadystatechange here 
    var comment = document.getElementById("comment").value; 
    var id = document.getElementById("postID").value; 
    xmlhttp.open("POST", "commentpost.php", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send("comment=" + comment + "&postID=" + id); 
} 

注意：如果使用正確的代碼縮進，可以輕鬆避免此類問題。