Question

我是这个网络开发者的新手。我已经创建了一个表单，我使用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>

Answer 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（请求正文接收）。完成（数据传输完成，发送后）。

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

IE仅显示OPENED警报消息 Firefox收到“Headers Received”，“Data transfer completed”，“OPENED”，“Data transfer completed”。

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

如何使用AJAX将数据发送到'post.php'？（没有Jquery）

1 个答案:

如何使用AJAX将数据发送到'post.php'？ （没有Jquery）

1 个答案:

如何使用AJAX将数据发送到'post.php'？（没有Jquery）