2

私はこのウェブ開発者の問題について初心者です。Ajax (JQuery lib) を使用してチャット ボックスを作成したフォームを既に作成しています。

さて、Jquery を使用せずに、Ajax の仕組みを理解するために、同様のことを試みたいと思います。まず、AJAX を使用して log.html にメッセージを書きたいだけなので、後で読むことができます。しかし、テキストエリアのデータを 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 の両方にあり、次の<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 アラート メッセージのみを表示します。

これがもう少し理解に役立つことを願っています。ウェブ上の究極のソースについては、常にw3.orgをチェックしてください。あまりユーザーフレンドリーで直感的ではないかもしれませんが、理由とすべきことについてのヒントを提供します.

于 2013-03-28T20:26:34.537 に答える