提交表单后可以发起ajax调用吗？答案

【问题标题】：Is it ok to initiate an ajax call after form submission ?提交表单后可以发起ajax调用吗？
【发布时间】：2016-12-09 02:38:42
【问题描述】：

表单提交后会发出一个ajax post请求。

我想在提交表单后调用ajax post。

但是 ajax 调用是在表单提交之前发出的，我是否需要延迟 ajax 调用？表单提交后怎么办？

通过提交表单，我正在调用添加函数来保存数据

$("#section-form").submit(function (e) {


    save_class_info();

});

function save_class_info() {

   var  action = 'saveclassinfo';


    var campus_info = {
        'campus_name': campus_name,
        'shift_name': shift_name,
        'medium_name': medium_name,
        'class_name': class_id,
        'teacher_id': teacher_id,
        'edit': 'false'
    };

    $.ajax({
        url: "/" + root + "/" + controller + "/" + action,
        type: "post",
        data: campus_info,
        success: function (response) {

            console.log('done');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }


    });
}

【问题讨论】：

表单提交页面将重新加载后。所以你应该先运行ajax。成功或错误你应该提交表单
我需要在 ajax 调用之前保存数据，因为我将在 ajax 调用后使用该数据:( @FastSnail
如果是这样发送两个ajax请求
@Amran 您的代码中只有一个 ajax 调用，那就是您的表单提交，对吗？
$("#section-form").submit(function (e) {e.preventDefault(); save_class_info(); });请试试这个。

标签： javascript jquery

【解决方案1】：

您需要使用preventDefault禁用默认的表单提交行为：

$("#section-form").submit(function (e) {
    e.preventDefault();
    save_class_info();
});

【讨论】：

【解决方案2】：

尽量阻止表单提交。

$("#section-form").submit(function (e) {
    e.preventDefault();
    e.stopPropagation();
    save_class_info();
});

【讨论】：

我希望在提交表单后发出 ajax 调用。你正在阻止它！
如果不阻止表单提交，页面将重新加载，所有数据都不会保留。没有理由使用 Ajax。

【解决方案3】：

那是我的错误。在表单提交期间，我无法发出 ajax 调用，因为该页面将在提交表单后刷新。所以我通过另一个 ajax 调用完成了表单的提交，在那个调用之后，我发布了另一个 ajax 帖子，因为我需要第一次 ajax 调用成功的数据。

感谢大家让我知道我的方法存在的问题。

【讨论】：