AJAX REQUEST问题重复

Question

我在jquery UI模式对话框中有一个按钮。点击时，该按钮发送AJAX请求，并在MODAL DIALOG中打开带有提交按钮的html表单。

        $('#buttonid').click(function(){
            var id = $('.sec_id').val();
            $.ajax({
            url: "parts/hesabat_dialog.php",
            cache: false,
            data: {"id": id},
            beforeSend: function() {
             . . .
            },
            success: function(html){
             . . .
            }
            });
            return false;
        });

然后我填写表单并点击提交按钮（这不是#buttonid），我发送另一个ajax请求，表单的所有数据都发送到页面do.php。

    $('#Formid').submit(function() {
        var data = $('#Formid').serialize();
        var id = $('#id').val();
        var url = 'element.php?id='+id;
        $.ajax({
        type: "POST",
        url: "parts/do.php",
        cache: true,
        data: data,
        beforeSend: function() {
        $('#dialog').append('Loading...');
        },
        success: function(data){
            $("#dialog").load(url);
        }
     });
        $("#Formid").unbind('submit');
        return false;
    });

所以，问题是，如果我点击#buttonid 5或6次，那么提交请求将被发送6次。你可以说使用unbind。好吧，在这种情况下，解除绑定应该会有所帮助，但你知道有3个按钮，如果我单击另一个按钮并再次返回到#buttonid，ajax请求将不起作用，如果我使用unbind，然后关闭模式对话框，然后重新打开它，ajax请求也将不再起作用。当我提交时，如何禁用多个请求（做1次），尽管按钮已经被点击了10次？

Answer 1

$(document).ready(function(){
$('.one-click').click(function(){
    if($(this).data('clicked')){
        return false;
    }
    else {
        $(this).data('clicked', true);
        setTimeout(function(){
      $('.one-click').data('clicked', false)
    }, 2000);
    }
});

})；

使用data变量将数据点击值设置为true，并在后续请求中返回false，一旦调用成功，只需再次设置为false即可。

Answer 2

我在加载的AJAX HTML文件中包含了js文件。当我从DOM中重新加载或清除HTML时，它仍然保留脚本。我把脚本移走了，所以它不是正在加载的HTML的一部分。

Answer 3

您可以定义一个变量（在按钮操作的范围之外），它包含ajax请求的状态。

    var button_ajax_state_sending = false;
    $('#Formid').submit(function() {
     if(!button_ajax_state_sending){ //only start if false (not sending)
            var data = $('#Formid').serialize();
            var id = $('#id').val();
            var url = 'element.php?id='+id;
            $.ajax({
            type: "POST",
            url: "parts/do.php",
            cache: true,
            data: data,
            beforeSend: function() {
            $('#dialog').append('Loading...');
            button_ajax_state_sending = true; // SET TRUE
            },
            success: function(data){
                $("#dialog").load(url);
                button_ajax_state_sending = false; // SET TRUE
            }
      });
      return false;
   });