AJAX请求第一次不起作用,但之后工作

Question

我正在制作一个简单的功能,因为它在w3schools官方网站上显示.我正在尝试运行AJAX请求的功能.

我想这一切都运行良好,除了代码只在第一次失败后才运行.我的意思是,让我们说你刚刚第一次来到我的网站,你尝试第一次提交,它只是刷新页面,没有任何反应.

据我所知,我尝试使用alert每行中的函数进行调试,以查找是否真的发出了请求.我发现readyState在代码运行的第一次(从每个浏览器,不同的计算机)中跳转从1到4,但下次它将呈现readyState 1,2,3和4并且BANG它将工作并提交.

我想过饼干周围的东西？但我仍然想知道它的原因是什么.伙计们,请帮忙.

Javascript函数代码(head 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>

请只给我PURE,RAW JAVASCRIPT解决方案,没有jQuery.

Answer 1

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