Ajax多次提交表单数据。

Question

带有Dialog小部件的jQuery。 当用户点击链接对话框窗口打开时（我正在使用Dialog Widget）。此表单包含很少的文本字段和文件字段用于文件上载。 当用户点击“添加文件”时，Ajax首先上传文件，然后进行第二次异步连接以上传表单数据。 我遇到的问题是Ajax提交表单五次，我不明白为什么以及如何阻止它。 在下图中，我将展示PHP回显$ _POST的内容。 下面是我的jQuery脚本：

(function(){
var form = $('#dialog_form form'),
    files = false,
    error_msg=false,
    this_cell,
    file_name=false;

    function uploadFile(){
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
        });
        $.ajax({
            url: 'index.php?route=catalog/file/upload_file&files&token=<?php echo $token; ?>',
            type: 'POST',
            async: false,
            data: data,
            cache: false,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(data, textStatus, jqXHR){
                if(typeof data.error === 'undefined'){
                    file_name = data.file_name;
                    //console.log(data);
                } else{
                    alert('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('FILE ERRORS------: ' + textStatus+' | '+errorThrown);
                //alert(jqXHR.responseText);
            }
        });
    }

    function submitForm(){
        var form_data = $('#dialog_form form').serialize();
        $.ajax({
            url: 'index.php?route=catalog/file/submit&token=<?php echo $token; ?>',
            type: 'POST',
            data: form_data,
            cache: false,
            dataType: 'json',
            success: function(data, textStatus, jqXHR){
                if(typeof data.error === 'undefined'){
                    console.log(data);
                    alert(data);
                    //var new_li = $('<li></li>',{
                    //    text:data.formData.title});
                    //this_cell.find('li').last().before(new_li);
                } else{
                    alert('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('SUBMIT ERRORS------: ' + textStatus+' | '+errorThrown);
                alert(jqXHR.responseText);
            }
        });
    }

    // lisen if file has been selected
    form.find('input[name="file"]').on('change',function(e){
        files=e.target.files;
    })

  $( "#dialog_form" ).dialog({
  autoOpen: false,
  height: 500,
  width: 500,
  modal: true,
  buttons: {
    "Add File": function() {
        $(this).find('button').unbind('click');
        console.log($(this));
        // if file has been selected to be uploaded
        if(form.find('input[name="file_type"]:checked').val()==='file'){
            uploadFile();
            form.find('input[name="file_name"]').val(file_name);
            submitForm();
        }else{
            submitForm();
        }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
  }
});

// toggle file and link fields based on radion button selection
$('#dialog_form input[name="file_type"]').on('change',function(){
    var $this = $(this),
        form =$this.closest('form');
    if($this.val()=="file"){
        form.find('[for="file"],[name="file"]').toggle();
        form.find('[for="link"],[name="link"]').toggle();
    }
    if($this.val()=="link"){
        form.find('[for="file"],[name="file"]').toggle();
        form.find('[for="link"],[name="link"]').toggle();
    }
})


// lisen for when the "add file" link is cliced on the page and open new dialog box with form
$('.product_id li:last-child').on('click',function(){
    this_cell=$(this).parent();
    var form_box = $( "#dialog_form" );
    form_box.find('input[name="product_id"]').val($(this).closest('td').data('product_id'));
    form_box.dialog( "open" );
})

}）（）;
伙计们，请让我知道要改变什么，以免Ajax多次提交！？ 谢谢

Answer 1

开始执行后，取消“提交”操作

$('#dialog_form form').unbind('submit'); //to disable multiple submissions

如果你想重新启用它

$('#dialog_form form').bind('submit')