jQuery AJAX表单提交两次

Question

我有一个表单,我通过jQuery捕获并通过AJAX发送.我的问题是每次刷新页面时表单都会提交多次.

我试图取消绑定提交按钮,但是在第一次提交后表单正常发布.任何帮助,将不胜感激

$('#exportForm').submit(function() {
  $.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      $('#exportForm').unbind('submit');
      console.log(response);
    }
  });
  return false;
});

Answer 1

除了调用preventDefault之外,还可以在事件上调用stopImmediatePropagation.

$('#exportForm').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});

Answer 2

您最有可能使用button或submit触发ajax事件.试试这个:

$('#exportForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr( 'action' ),
            data: $(this).serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });

Answer 3

如果您正在使用某种验证(例如jQuery验证),表单将被提交两次,因为除了$('#exportForm').submit您自己编写之外,验证插件还将在成功验证所有字段后提交表单.

注意:如果您使用的是jQuery验证,请避免使用.submit().相反,使用submitHandler.

Answer 4

您可以简单地使用e.stopImmediatePropagation();：

例如 ：

$('#exportForm').submit(function(e){
    e.stopImmediatePropagation();