如何使用AJAX發送數據到'post.php'？（沒有Jquery）

我是這個web開發者的新手事宜。我已經使用Ajax（JQuery lib）創建了一個聊天框。如何使用AJAX發送數據到'post.php'？（沒有Jquery）

現在，我想嘗試做類似的事情，而不使用Jquery來理解Ajax是如何工作的。首先，我只想使用AJAX在log.html上編寫消息，然後我可以稍後閱讀它們。但我不明白爲什麼我不能發送我的textarea數據到post.php。

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Teste</title> 

     <script type="text/javascript"> 

    function sendXMLDoc(){ 

     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"); 
      } 


     var message=document.getElementById('msg').value; 

     xmlhttp.open("POST", "post.php", false); 

     xmlhttp.onreadystatechange = function() {//Call a function when the state changes. 

      if(xmlhttp.readyState == 0) { 
        alert("UNSENT"); 
      } 
      if(xmlhttp.readyState == 1) { 
        alert("OPENED");//check if the data was revived successfully. 
      } 
      if(xmlhttp.readyState == 2) { 
        alert("Headers Received");//check if the data was revived successfully. 
      } 
      if(xmlhttp.readyState == 3) { 
        alert("Loading response entity body");//check if the data was revived successfully. 
      } 

      if(xmlhttp.readyState == 4) { 
       if (xmlhttp.status == 200) { 
        alert("Data transfer completed");//check if the data was revived successfully. 

        } 
      } 
     } 

     xmlhttp.send(message);   
    } 

    </script>

xmlhttp.send（data）：爲什麼我沒有發送我的數據到post.php？

post.php中是我寫我log.html（但我不能把我的消息，我不明白爲什麼）：

<?php 

    $text = $_POST['message']; // WHY I CAN'T RECEIVE MY POSTED MESSAGE? 
    $fp = fopen("log.html", 'a'); 
    fwrite($fp, "<div>\n(".date("g:i A").")<br>".$text."<br>\n</div>\n"); 
    fclose($fp); 

?>

這是我form.html

<body> 
    <h1>Insert text on log.html</h1> 

    <form method="post" onsubmit="sendXMLDoc();">  
    <textarea name="message" maxlength="196" rows="8" ></textarea> 
    <br> 
    <input type="submit" value="Send"/> 
    </form> 



</body>

來源

2013-03-28 ePascoal

嘗試添加類似於'xmlhttp.setRequestHeader（「Content-Type」，「application/x-www-form-urlencoded」）的請求頭文件＃ –

你看過this link嗎？

它似乎有關於如何使用PHP和MySql構建AJAX請求的完整說明。

編輯：

在你的代碼的問題是無論在你的post.php中，它具有（缺乏最後<br>前雙引號）不正確的語法，而應該是這樣的：

post.php中

<?php 
    $text = $_POST['message']; 
    $fp = fopen("log.html", 'a'); 
    fwrite($fp, "<div>\n(".date("g:i A").")<br>".stripslashes(htmlspecialchars($text))."<br>\n</div>\n"); 
    fclose($fp); 

?>

，並與請求頭，其應具有的內容類型設置（請參考下面的代碼）

我基於此答案w3.org。

這裏給出的最終html應該可以幫助你理解Ajax請求在不同瀏覽器上的行爲。試試看。

看來雖然Firefox加載請求，你需要做一些事情，當狀態是開放的（1），我不明白爲什麼。

請在不同的瀏覽器上嘗試此代碼以查看XMLHttpRequest的不同方法。

<!DOCTYPE html> 
<html> 

<head> 
<script language="javascript" type="text/javascript"> 



function sendXMLDoc(obj){ 


     var message=obj["message"].value; 
     var data = "message=" + message; 
     var xmlhttp; 
     try{ 
      // Opera 8.0+, Firefox, Safari 
      xmlhttp = new XMLHttpRequest(); 
     }catch (e){ 
      // Internet Explorer Browsers 
      try{ 
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch (e) { 
       try{ 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       }catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
       } 
      } 
     }  

     url = "http://localhost/AjaxPhp/post.php" 

     xmlhttp.open("POST", url , true); 
     xmlhttp.onreadystatechange = display_data; 
     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 

     xmlhttp.send(data); 

     function display_data() { 

      if(xmlhttp.readyState == 1) { 
        alert("OPENED");//check if the data was revived successfully. 
      } 
      if(xmlhttp.readyState == 2) { 
        alert("Headers Received");//check if the data was revived successfully. 
      } 
      if(xmlhttp.readyState == 3) { 
        alert("Loading response entity body");//check if the data was revived successfully. 
      } 

      if(xmlhttp.readyState == 4) { 
       if (xmlhttp.status == 200) { 
        alert("Data transfer completed");//check if the data was revived successfully. 
        } 
      } 
     } 
} 


</script> 
</head> 

<body> 
    <h1>Insert text on log.html</h1> 

    <form method="post" onsubmit="sendXMLDoc(this);">  
    <textarea name="message" maxlength="196" rows="8" ></textarea> 
    <br> 
    <input type="submit"/> 
    </form> 


</body> 
</html>

我並不真正瞭解個爲什麼，但根據w3，請求的順序應該，在我的理解，就是：

打開，HEADERS_RECEIVED（後（在調用open方法後） setRequestHeader），LOADING（請求正文）。完成（數據傳輸完成後，發送）。

鉻處理post.php中，但沒有提出任何警告框（也許它我彈出的設置，也許不是）

IE只顯示打開的警報消息火狐那張「頭接收」，「數據傳輸完成「，」打開「，」數據傳輸完成「。

希望這有助於更多地理解它。總是去檢查w3.org在網絡上的最終來源。它可能不是非常用戶友好和直觀的，但提供了一些關於原因和應用的提示。

來源

2013-03-28 20:26:34 MrWater

編號首先，感謝您的回覆。這是一個非常有趣的網站，我相信這將幫助我在將來的腳本中，我已經閱讀過類似的網站之前，我發佈這個問題，但即使如此，我仍然不明白什麼是錯的，因爲我相信我的腳本幾乎是正確的。 – ePascoal

我編輯了我的答案，通過這些更改，代碼應該可以在不同的瀏覽器上工作。乾杯 – MrWater

我現在已經注意到我的腳本可以和IE一起工作，就像你參考一樣..但是用firefox和chrome不能。我想你會發現很大的問題爲什麼這種方法不適用於其他瀏覽器。 – ePascoal

如何使用AJAX發送數據到'post.php'？ （沒有Jquery）

回答

相關問題

如何使用AJAX發送數據到'post.php'？（沒有Jquery）