2

我是这个 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>
4

1 回答 1

3

你看过这个链接吗？

它似乎对如何使用 PHP 和 MySql 构建 AJAX 请求有完整的解释。

编辑：

您的代码中的问题都在您的 post.php 上，它的语法不正确（在 last 之前缺少双引号<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以获取网络上的最终资源。它可能不是非常用户友好和直观，但提供了一些关于为什么和应该的提示。

于 2013-03-28T20:26:34.537 回答