Ajax多次提交表单数据。

Question

带有对话框小部件的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')