我正在制作一个简单的函数,如 w3schools 官方网站上所示。我正在尝试运行 AJAX 请求的函数。
我想一切都运行良好,除了代码仅在第一次失败后运行。我的意思是,假设您第一次访问我的网站,并尝试第一次提交,它只是刷新页面,没有任何反应。
据我所知,我尝试在每行中使用 alert
函数进行调试,以查找是否确实发出了请求。我发现代码第一次运行时,readyState从1跳到4(在每个浏览器、不同的计算机上),但下次它将呈现readyState 1、2、3和4,然后砰地一声将工作并提交。
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>
最佳答案
实际上非常简单:P 您的按钮的默认属性“类型”为“提交”,当发生这种情况时,表单将被提交,从而导致刷新。添加 'type="button"' 来更改此功能,并且您不应再进行刷新以允许 ajax 完成其请求。
关于javascript - AJAX 请求第一次不起作用,但此后可以起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37953199/