javascript - 提交表单而不刷新页面

Question

我意识到 Ajax 是无需刷新页面即可提交表单的公认方法，但要做到这一点需要循环遍历每个字段并构建要提交的 Post 字符串。

是否没有其他方法可以使用浏览器内置功能来提交表单，但拦截返回的 html 以停止刷新页面？

编辑:与询问表单验证的建议重复内容不同:“我想要运行 javascript 用户验证”

编辑2:主要问题是如何阻止服务器对提交的响应导航到新页面。服务器是否可以响应某些内容来阻止整个页面刷新？

编辑3:返回 http 204 响应怎么样:服务器已收到请求，但没有要发回的信息，客户端应停留在同一文档 View 中。这主要是为了允许脚本的输入而不同时改变文档

Answer 1

是的，有..这个想法是处理表单操作和 onsubmit 事件

考虑下面的代码:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }

}

此时您正在拦截调用以确保表单有效。如果一切都通过，则会触发页面刷新。如果您希望不发生刷新，您需要通过 ajax 处理帖子，您需要重建整个调用。希望这会帮助你..干杯

如果您使用 jquery，一个简单的方法是使用 http://api.jquery.com/serialize/功能

一种方法是使用 jQuery:

<form id="myForm" name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">


function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }

    var url = $('#myForm').attr('action');
    var data = $('#myForm').serialize();
    $.post(url, data);
}