Question

每次我提交表单时都不会发生这种情况，但每次提交表单时，AJAX都会提交表单/再次运行ajax。如何更改以下代码以防止这种情况发生。

$('.like_form').submit(function submitter() {
var data = $(this).serialize();

$.ajax({
    url: "../like.php",
    type: "POST",
    data: data,
    success: function(data) {   

        var comment_id = data.slice(-3);
        data = data.substring(0, data.length -3);
    jQuery.trim(comment_id);
        $('#comments_'+comment_id).html(data);
        $('.like_form').submit(submitter); // rebind submit



    },
    error: function(){
        alert('ERROR');
    }
});
return false;
});

Answer 1

您的函数不会检查函数ajax是否已在进行中。添加条件将阻止多次提交

$('.like_form').submit(function submitter() {

    if($(this).data('submitting') == true) return; //return if ajax in progress
    $(this).data('submitting',true);

    var data = $(this).serialize();
    $.ajax({
        url: "../like.php",
        type: "POST",
        data: data,
        success: function(data) {   
            var comment_id = data.slice(-3);
            data = data.substring(0, data.length -3);
            jQuery.trim(comment_id);
            $('#comments_'+comment_id).html(data);
            $(this).data('submitting',false);
        },
        error: function(){
            alert('ERROR');
            $(this).data('submitting',false);
        }
   });
   return false;
});

Answer 2

使用处理程序绑定事件是累积的，这意味着您在成功回调中执行的绑定将是原始绑定的附加：

$（＆＃39; .like_form＆＃39）。提交（提交）;

这在jQuery docs on event hanlders：

中说明

从jQuery 1.4.2开始，重复的事件处理程序可以绑定到一个元素而不是被丢弃。

您将受益于jQuery one method：

.one（）方法与.on（）完全相同，只是处理程序在第一次调用后未绑定。

所以您的代码看起来像这样，在您拥有它的两个地方将.submit(更改为.one('submit',：

$('.like_form').one('submit', function submitter() {
    var data = $(this).serialize();
    $.ajax({
        url: "../like.php",
        type: "POST",
        data: data,
        success: function(data) {   
            var comment_id = data.slice(-3);
            data = data.substring(0, data.length -3);
            jQuery.trim(comment_id);
            $('#comments_'+comment_id).html(data);
            $('.like_form').one('submit', submitter); // rebind submit
        },
        error: function(){
            alert('ERROR');
            $('.like_form').one('submit', submitter); // rebind submit
        }
    });
    return false;
});

...现在你的代码评论是对的：

 // rebind submit

我在上面的代码中添加了一行来在错误回调中重新绑定处理程序，因此用户可以重试。

AJAX代码使用Jquery运行多次

2 个答案: