问题：

Question

问题：

当我单击HTML表单中的提交按钮时，它会调用带有Ajax请求的JavaScript函数。 - 此返回成功，但结果几乎立即消失。

我只是想知道我是否在这里遗漏了一些东西（除了jquery，我知道这是一种更简单的方法，但xmlhttprequest是当前的要求）

我已经粘贴了下面的代码 - 也许我错过了一个小错误（我希望），因为我专注于Ajax已经有一段时间了。

HTML代码：

<body>

   <form>
       <label>Name:</label>
       <input type="text" id="name" value="test1" placeholder="Your name" >

       <label>Email:</label>
       <input type="email" id="email" value="test2@acme.com" placeholder="Your email" >

       <label>Country:</label>
       <input type="text" id="country" value="test3" placeholder="Your country" >

       <input type="submit" value="Submit Form" onclick="postRequest()" >
   </form>
   <div id="repsonse"></div>
    <script src="scripts.js"></script>
</body>

的JavaScript：

function postRequest()
{
   //data from the form
   var name = document.getElementById('name').value;
   var email = document.getElementById('email').value;
   var country = document.getElementById('country').value;
   var submitForm = "submitForm";

   //ajax objects
   var http = new XMLHttpRequest();
   var url = "functions_ajax.php";
   var params = JSON.stringify({ callFunction : submitForm, name : name, email : email, country : country });

   //alert(params);

   //Deal with ajax components
   http.open("POST", url, true);
   http.setRequestHeader("Content-type", "application/json; charset=utf-8");
   http.send(params);

   http.onreadystatechange = function() {

    //alert("Checking Status "+http.status+" "+http.readyState);

    if(http.readyState == 4 && http.status == 200) {
        //Return the data from the ajax request
        console.log(http.responseText);
        document.getElementById("repsonse").innerHTML = "<h1>Success!</h1>";
    }
    else
    {
       console.log(http.responseText);
       console.log(http.status);
       document.getElementById("repsonse").innerHTML = "<h1>No Cigar! HTTP Status == "+http.status+" </h1>";
    }
} 
}

Answer 1

当您点击提交按钮按钮时，您提交表单，导致页面刷新。

最快的解决方案是将输入更改为：

<input type="button" ... />

因为这会阻止表单提交。

或者，您可以在处理程序中获取事件对象。你应该通过给你的按钮设置一个ID（例如，＆＃34; myButton＆＃34;）来设置你的事件处理程序，并像这样连接处理程序：

document.getElementById("myButton").onclick = function(e) {
    // ... body of your function here
    // or, call postRequest() here
    e.preventDefault();
}

然后，您将从按钮中删除onclick属性，因为该函数通过javascript绑定到click事件。

这样可以阻止提交表单。

或者，您可以将onsubmit处理程序挂钩到表单。给你的表单一个id，例如＆＃34; myForm＆＃34;，然后使用：

document.getElementById("myForm").onsubmit = function(e) {
    e.preventDefault();
}

您也可以从表单提交处理程序中调用postRequest()，但在这种情况下，您需要保留提交按钮，而不是将其变为普通按钮。

确保在您设置这些事件处理程序时，您可以在页面底部的脚本中执行此操作，或者在窗口期间或之后运行的功能中执行此操作。 s onload事件。

Answer 2

尝试将e.preventDefault()添加到顶部。

编辑：对没有评论的错误建议进行贬低..哇。

XMLHttpRequest请求的结果消失

问题：

HTML代码：

的JavaScript：

2 个答案: