从表单提交函数中进行 jQuery AJAX 调用

Question

长话短说：

1. 我有一个 HTML 表单，带有一个附加到 onSubmit 事件的 jQuery 函数。
2. 在 onSubmit 函数中，我需要进行 AJAX 调用，并根据响应更新表单元素。

示例代码：

$("#theForm").submit(function() {
    $.ajax({
        url: theUrl,
        type: "POST",
        data: theData
    }).done(function(theResponse) {
        $("#someInput").val(theResponse)
        $("#theForm").submit()  // [2] Submit the form now
    }).fail(function(jqXHR, textStatus) { 
        alert("Failure") 
    })
    return false  // [1] Prevent submission prior to AJAX call completing
})

我的问题是这会创建一个无限循环。

该函数最外层返回false，防止表单在AJAX调用完成之前提交。在 AJAX 调用成功完成后，我正在尝试在 done() 处理程序中实际提交表单。但是，这只是递归调用整个 onSubmit 函数。

如何将 AJAX 调用嵌套在 onSubmit 处理程序中...这样是否允许提交的决定由嵌套的 AJAX 函数而不是其封闭的处理程序函数驱动？

Answer 1

您的 [2] 部分需要直接在表单上进行。

$("#theForm")[0].submit()

这将绕过 jQuery 绑定事件。