在表单提交函数中调用jQuery AJAX

Making a jQuery AJAX call from within a form submit function

本文关键字:jQuery AJAX 调用 表单提交 函数      更新时间:2023-09-26

长话短说:

    我有一个HTML表单,附带一个jQuery函数到onSubmit事件。在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函数驱动的,而不是由它的封装处理程序函数驱动的?

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

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