Question

我在提交表单时要执行以下jQuery ajax：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>

    $("form").submit(function() {
    $.ajax("/myapp/rest/customer/created", {
        data : $("form").serialize(),
        type : "POST",
        success : function(data, status, jqXHR) {
            window.location.href = "/myapp/rest/customer/created";

        },
        error : function(jqXHR, status, error) {
            alert(error);
        }
    });
    return false;
    });
</script>

表格是：

<form action="/myapp/rest/customer/created" method="POST">
    <table border="1">
        <tr>
            <td>Username:</td>
            <td><input type="text" id="username" name="username"></td>
        </tr>
        <tr>
            <td>Customer name:</td>
            <td><input type="text" id="name" name="name"></td>
        </tr>
        <tr>
            <td>Customer DOB:</td>
            <td><input type="text" id="dob" name="dob"></td>
        </tr>
    </table>
    <br /> <input type="submit" value="Submit">
</form>

单击“提交”按钮后，AJAX代码不会执行，因为无论表单提交是否成功，它都将重定向到/myapp/rest/customer/created页面。似乎根本没有执行AJAX代码。这是为什么？此外，如果服务器在发生错误时向客户端发送错误消息字符串，我应该在AJAX代码中检索哪个值来提醒用户？

Answer 1

~~您需要阻止FORM的提交默认行为：~~

$("form").submit(function(evt) { evt.preventDefault(); ...

<击>

正如@adeneo所说，你在ajax调用之后确实包含了一个返回false。问题是，如果你的JS代码在文档的HEAD中，它会在之前执行声明FORM本身，所以你的处理程序被分配给一组空表单的所有元素。

在这种情况下，解决方案是@ adeneo的建议：从document.ready事件处理程序（好）调用您的代码，或者将它放在HTML正文的末尾（丑陋）。

Answer 2

在成功回调中，您使用

重定向到/ myapp / rest / customer / created

window.location.href = "/myapp/rest/customer/created";

您需要在数据中检索ajax查询的结果：

功能（数据，状态，jqXHR）

preventDefault和return false不同，但在这个例子中也是这样。

你可以等待dom准备好了： http://jsfiddle.net/fZCFs/2/

AJAX未在表单提交中执行

2 个答案: