如何避免多次AJAX调用？

小编典典

如何避免多次AJAX调用？

ajax

我正在使用以下代码通过AJAX提交表单：

$( 'form' ).submit(function(e) {

    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        success: function( data ) {
            // Do something here.
        },
        error: function( data ) {
            // Do something here.
        }
    });
    return false;
});

背景

我的PHP处理程序执行各种任务，然后发回响应。然后，我可以data在成功或错误函数中执行某些操作。

我的问题

当用户双击表单的“提交”按钮时，将发生两次AJAX调用，这将导致我的PHP处理程序中的代码执行两次。

我的问题

如果用户双击提交，如何避免我的代码执行两次？

阅读 230

2020-07-26

共1个答案

小编典典

当AJAX调用再次出现时，请先禁用首次单击的“提交”按钮，然后重新启用它。

例如：

$( 'form' ).submit(function(e) {
    var $form = $(this);
    $form.find('submit').attr('disabled', true);
    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        complete: function() {
            $form.find('submit').removeAttr('disabled');
        },
        success: function( data ) {
            // Do something here.
        },
        error: function( data ) {
            // Do something here.
        }
    });
    return false;
});

2020-07-26