如何使用 AJAX 将数据发送到“post.php”？（没有jQuery）答案

【问题标题】：How to send data to 'post.php' using AJAX? (without Jquery)如何使用 AJAX 将数据发送到“post.php”？（没有jQuery）
【发布时间】：2013-03-19 10:19:51
【问题描述】：

我是这个 webdeveloper 问题的新手。我已经制作了一个表单，我使用 Ajax (JQuery lib) 创建了一个聊天框。

现在，我想尝试在不使用 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>

【问题讨论】：

尝试添加像xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")这样的请求头

标签： ajax post xmlhttprequest

【解决方案1】：

你看过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 要加载请求，但您需要在状态为 OPENED (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，在我看来，请求的顺序应该是：

OPENED（调用 open 方法后）、HEADERS_RECEIVED（setRequestHeader 后）、LOADING（收到请求正文）。 DONE（数据传输完成，发送后）。

Chrome 处理 post.php 但不显示任何警报框（可能是我的弹出设置，也可能不是）

IE 仅显示 OPENED 警报消息 Firefox 显示“已收到标头”、“数据传输完成”、“已打开”、“数据传输完成”。

希望这有助于更多地理解它。始终检查w3.org 以获取网络上的最终来源。它可能不是非常用户友好和直观，但提供了一些关于为什么和应该的提示。

【讨论】：

没有。首先，感谢您的回复。这是一个非常有趣的网站，我相信这将对我未来的脚本有所帮助，在我发布这个问题之前我已经阅读了类似的网站，但即便如此我仍然不明白哪里出了问题，因为我相信我的脚本几乎是正确的。
我已经编辑了我的答案，通过这些更改，代码应该可以在不同的浏览器上运行。干杯
我现在注意到我的脚本可以在 IE 上运行，就像你提到的那样。但在 firefox 和 chrome 上不行。我想你找到了一个大问题，为什么这种方法不适用于其他浏览器。
它确实有效，如果你包括if(xmlhttp.readyState == 1 ) { alert("OPENED");//check if the data was revived successfully. }，正如我在我的最终答案中提到的那样。试试看。
如果这个答案对您有帮助，请投票和/或接受它作为您问题的正确答案，因为您的问题现已解决。