Question

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

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

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

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

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

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

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

1 个答案: