AJAX 请求第一次无效，但之后有效

Question

我正在制作一个简单的功能，如 w3schools 官方网站所示。我正在尝试运行 AJAX 请求的函数。

我想这一切都很好，除了代码在第一次失败后仅运行s。我的意思是，假设您是第一次访问我的网站，您第一次尝试提交，它只是刷新页面，但没有任何反应。

据我所知，我尝试在每一行中使用 alert 函数进行调试，以确定是否确实发出了请求。我发现 readyState 代码运行s 第一次从 1 跳到 4（在每个浏览器，不同的计算机中），但下一次它将呈现 readyState 1、2、3 和 4 和BANG 它会工作并提交。

Javascript函数代码（head标签内）

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/inputs

<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>

Answer 1

实际上非常 simple:P 您的按钮是 "submit" 的默认属性 'type'，当发生这种情况时，表单将被提交并导致刷新。添加 'type="button"' 以更改此功能，您不应再刷新以允许 ajax 完成其请求。

AJAX 请求第一次无效，但之后有效

AJAX request doesn't work the first time but works thereafter

javascript

ajax

xmlhttprequest

readystate