AJAXリクエストは初めて動作しませんが、それ以降は動作します

Question

私はw3schools公式サイトに表示されているように簡単な機能を作っています。私はAJAXリクエストの関数を実行しようとしています。

コードが最初に失敗した後にのみ実行されることを除いて、すべてうまくいくと思います。私はあなたがちょうど私のウェブサイトに初めて来て、あなたが最初に提出しようとすると、それはページをリフレッシュし、何も起こらないと言うことを言いましょう。

私の知る限り、要求が実際に行われたかどうかを見つけるために、各行にalertの機能を使用してデバッグしようとしました。私はreadyStateがコードが（すべてのブラウザ、異なるコンピュータで）実行された最初の1から4にジャンプするが、次回はreadyState 1,2,3および4をレンダリングして動作し、提出することがわかった。

私はクッキーの周りに何か考えましたか？しかし、私はまだそれの原因は何か不思議です。みんな、助けてください。

（headタグ内）のJavascript機能コード

function sendForm() { 

    var criarRequest = new XMLHttpRequest(); 
    criarRequest.onreadystatechange = function() { 
     if (criarRequest.readyState == 4 && criarRequest.status == 200) { 
      document.getElementById("contacts").innerHTML = criarRequest.responseText; 
     } 
    }; 
    //var loading = document.getElementById("contacts").innerHTML = "A enviar..."; 
    var inputEmail = document.getElementById("email").value; 
    var inputMensagem = document.getElementById("mensagem").value; 
    criarRequest.open("POST", "sendEmail.php", true); 
    criarRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    criarRequest.send("email="+inputEmail+"&mensagem="+inputEmail); 
} 

HTMLコード形式/入力

<form> 
    <input style="width:220px; height:39px" type="text" id="email" placeholder="Email" /> 
    <br /> <br /> 
    <textarea style="width:220px; height:100px" id="mensagem" placeholder="Mensagem"></textarea> 
    <br /> <br /> 
    <button id="enviar" onclick="sendForm()">Enviar</button> 
</form> 

私だけPURE、RAW JAVASCRIPTソリューション、ないのjQueryをお願いします。

Answer 1

実際には非常に単純です：あなたのボタンは「submit」のデフォルトの属性 'type'です。そうなると、フォームは送信されてリフレッシュを引き起こします。 'type = "button"'を追加するとこの機能が変更され、リフレッシュしなくてもajaxが要求を完了できるようになります。