问题：

当我点击我的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="[email protected]" 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>"; 
    } 
} 
}

来源

2017-03-20 Jeff Kranenburg

当你说结果消失时，你的意思是它被“没有雪茄！”取代。消息，还是innerHTML刚刚恢复为空白？ –

它回到空白 –

你有任何其他的JavaScript代码，可能会设置该div的innerHTML？你有没有可以分享的主机输出？ –

当你点击按钮，这是一个提交按钮，你提交表单，导致页面刷新。

最快的解决办法是将输入更改为：

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

由于这将阻止表单提交。

或者，您可以在您的处理程序中获取事件对象。你应该让你的按钮的ID（比方说，“为myButton”），并挂接像这样的处理程序中设置你的事件处理程序向上穿过JS：

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

然后，你会从按键上移开onclick属性，因为该功能正在通过JavaScript绑定到点击事件。

这将阻止表单被提交。

或者，您可以将onsubmit处理程序挂接到您的表单。给你的形式的ID，如“myForm会”，并使用：

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

你也可以拨打postRequest()从形式的onsubmit处理程序，但在这种情况下，你要保持提交按钮，而不是把它进入正常按钮。

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

来源

2017-03-20 19:25:39

这对我有效，所以我连根拔起 - 对不起，它仍然显示为零，但谢谢你的详细答案。 - 我也有提交的类型，所以当我将它改为按钮时，它修复了它。 –

谢谢你，先生:)我很高兴我可以帮忙。 –

-1

尝试增加e.preventDefault()顶端。

编辑：Downvoting在没有评论的坏建议..哇。

来源

2017-03-20 19:15:15

downvote并不一定意味着建议是不好的。这可能意味着答案没有用处和/或质量不好。 –

虽然...你现在的答案是不正确的。 'e'是未定义的。 –

好的，这很公平。然而，阿尼什详细阐述了我的评论..也下了投票。 –

结果消失

问题：

HTML代码：

的JavaScript：

回答

相关问题