AJAX和php表单提交后不小心再次刷新答案

【问题标题】：AJAX and php form inadvertently refreshes again after submissionAJAX和php表单提交后不小心再次刷新
【发布时间】：2017-11-10 07:37:06
【问题描述】：

我正在学习使用 AJAX 和 PHP 创建提交表单。它正在工作，但只是间歇性的。很多时候，表单在点击提交后不会更新。但是当它确实起作用时（并显示我成功提交的文本），页面会再次快速刷新，并返回表单输入页面。我做错了什么？

注意：如果相关，我也尝试使用“POST”方法，但我不断收到“405 Method not allowed”错误。我假设这与我的 Web 服务器的设置方式有关，但我找不到任何允许（或拒绝）POST 提交的设置。以防万一这与解决方案有关。

这是我的 HTML 页面代码：

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };

        xmlhttp.open("GET","refresh.php?q="+str.value,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>


<form action="#" method="get" onsubmit="return showUser(this.name)">
<label>Name :</label>
<input id="name" name="name" placeholder="Name" type="text">
<input type="submit" value="Submit">
</form>

<br>
<div id="txtHint"><b>Table should show up here...</b></div>
</body>
</html>

这是我的“refresh.php”页面代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<?php
$q = strval($_GET['q']);

echo '<p>Hello World</p>';
echo $q; 
echo "<p>Table shows up here!</p>";

?>
</body>
</html>

【问题讨论】：

停止冒泡！您还可以为您的 js 使用 jquery，因为它会在将来为您省去很多麻烦（并使您成为一个懒惰的 js 编码器，但是干草，为什么不呢？）。提示：在 showUser() 函数的末尾添加 return false;。
可能与stackoverflow.com/questions/3350247/…重复
return false 有效，因为onsubmit 事件只是浏览器在提交表单时所做的事情（实际上之前）。所以你可以错误检查，或者劫持它。函数默认返回true，所以函数完成后表单继续提交。当它这样做时，它会转到action（如果没有action，则转到同一页面）。这就是为什么输入return false 会告诉 onsubmit 函数在最后停止表单提交过程本身。阻止页面刷新。
正确。你可以通过这样做来控制很多事情。 Ajax 调用数据位，使用数据更改更新 DOM，在发送到服务器之前处理输入验证，等等等等。如果你想触发一个 ajax 调用并提交表单，你也可以这样做，但是让确保链接事件，以便 ajax 在页面更改之前完成；）
尝试使用 jQuery 会更容易，而且代码也更少。

标签： javascript php ajax forms

【解决方案1】：

正如@Randall 和@Balwant 所指出的，答案是在showUser() 函数的末尾添加return false;。

【讨论】：