0

提交表单时，我有以下要执行的 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 代码中检索哪个值以提醒用户？

4

2 回答 2

0

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

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

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

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

于 2013-06-24T17:57:42.410 回答
0

在成功回调中，您重定向到 /myapp/rest/customer/created

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

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

功能（数据，状态，jqXHR）

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

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

于 2013-06-24T18:08:00.377 回答