AJAXリクエストが実行されるかどうかを知る方法？

-1

私は、私は、このHTMLコードを持っているAJAX、を学んでいます：それは、私が欲しいものAJAXリクエストが実行されるかどうかを知る方法？

<?php 
echo "hello"; 
?>

私は送信ボタンをクリックしたときにということである。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
    My first chat page 
    </title> 
    <meta charset = "utf-8"> 
    <style> 
    #message-area { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    } 
    #send-button { 
    float: right; 
    margin: 20px; 
    color: white; 
    background-color: green; 
    } 
    textarea { 
    float: left; 
    width: 90%; 
    height: 4em; 
    font-family: cursive; 
    fon-size: 20px; 
    resize: none; 
    } 

    </style> 
</head> 
<body> 


    <div id="message-area"> 
     <textarea id="myTextarea" > 
     </textarea> 
     <button type="button" id="send-button"> 
     Send 
     </button> 

    </div> 
</body> 
<script> 
var sendButton = document.getElementById("send-button"); 

function trial(){ 
    var xhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      sendButton.innerHTML = this.responseText; 
     } 
     xhttp.open("GET", "insertmessage.php", true); 
     xhttp.send(); 
    } 
} 

sendButton.addEventListener("click", trial); 

</script> 
</html>

をそして、私はこの単純なPHPコードを持っていることAJAX接続を設定し、サーバーに接続し、サーバーは「Hello」を送信し、送信ボタンの内部HTMLを変更します。私はWAMP wwwディレクトリ内の同じフォルダにそれらを試しましたが、うまくいきませんでした。

出典

2016-09-21 Mohamed Karam

あなたの 'xmlhttp'はどこから来たのですか？ –

ブラウザのインスペクタを開いて、ネットワークタブをチェックしてリクエスト結果を確認することができます –

まず試行後にsendButton.addEventListener（ "click"、trial）と言う必要があります。 – mhodges

ちょうどこのコードは、あなたのAJAX要求があるときに、このイベントにのみ起こる（あなたのonreadystatechangeにイベント内でそれを入れてから実行されることはありませんので、あなたのAjaxは送信されません

xhttp.open("GET", "insertmessage.php", true); 
xhttp.send();

xmlhttp.onreadystatechange = function(){ 
}

外に置きます送信）

xhttp.open("GET", "insertmessage.php", true); 
xhttp.send();

あなたのコードは次のようになります

var sendButton = document.getElementById("send-button"); 

function trial(){ 
    var xhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      sendButton.innerHTML = this.responseText; 
     } 
    } 
    xhttp.open("GET", "insertmessage.php", true); 
    xhttp.send(); 

} 

sendButton.addEventListener("click", trial);

出典

2016-09-22 03:44:47 Beginner

eventListener割り当てでtrial（）を実行すると、trialはすでに実行されており、ajax呼び出しを行います。クリックすることなくhtmlを更新するはずです。ここでコードを確認することができます：http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get

ボタンのテキストを更新する必要があります。それ以外の場合は、PHPサーバーに問題があります。ちょうどブラウザに完全に構築されたPHPのURLを置く応答を確認してください。

このようなデバッグでは、ブラウザのデバッグツールは非常に便利です。 chromeにはネットワークタブがあり、これはあなたのリクエストに関するすべてを伝えることができます。

出典

2016-09-21 22:46:04

私はPHPページをリクエストすると、こんにちは！ –

ボタンをクリックしてもネットワークに何も表示されません。 –

最初の部分を説明してください。私はそれを変数に格納しなかったので、クリックせずに呼び出されることを意味しますか？ var x = function（）と同様ですか？ –

AJAXリクエストが実行されるかどうかを知る方法？

答えて

関連する問題