AJAX 请求第一次不起作用，但之后有效

Question

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

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

据我所知，我尝试使用每行中的alert函数进行调试，以查找是否真的发出了请求。我发现代码第一次运行时(在每个浏览器、不同的计算机中)，readyState从 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>
<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

实际上非常简单：P 您的按钮是"提交"的默认属性"类型"，发生这种情况时，表单被提交导致刷新。添加"type="button"'来更改此功能，你不应该再有刷新允许ajax完成其请求。