Question

我在一个页面上有2个表单。一个上传图像和其他上传规格。

问题我遇到了我的Ajax请求的问题，该请求多次发送表单请求。如果我点击“上传图片”，它会上传相同的图片几次。它会将click事件加入并每次都将其添加到新事件中。

我尝试使用//IMAGE UPLOAD $(document).unbind('submit').bind('submit', "#UploadImage",function() { event.preventDefault(); var customerId = $(this).parent().find('input[name="customerId"]').val(); var image = $(this).parent().find('input[name="image"]').val(); //send ajax request jQuery.ajax({ url: "../data/stock.php?action=stock-image-upload", type: "POST", data: new FormData(this), processData: false, //prevent jQuery from converting your FormData into a string contentType: false, success: function(data, textStatus, jqXHR) { console.log(2); $('.image-viewer-modal').modal('hide'); var filter = "<?php echo $id_stc ?>"; var tab_content_to_change = "#stock-sub-list"; jQuery(tab_content_to_change).load('/tasks/stock/stock-list.php?filter='+filter); }, error: function(jqXHR, textStatus, errorThrown){ //Display error message to user alert("An error occured when saving the data"); } }); });修复此问题;它工作但是，如果我点击上传规范，它将运行上传图片请求。所以.Unbind（）没有用。

我可以解决这个问题。所以正确的ajax请求只发送一次。

以下是我上传图片的代码。

  //specification UPLOAD
     $(document).unbind('submit').bind('submit', "#Uploadspecification ",function() {

         event.preventDefault();

         var customerId = $(this).parent().find('input[name="customerId"]').val();
         var specification = $(this).parent().find('input[name="specification "]').val();

       //send ajax request
       jQuery.ajax({
         url: "../data/stock.php?action=stock-specification -upload",
         type: "POST", 
         data: new FormData(this), 
         processData: false, //prevent jQuery from converting your FormData into a string
         contentType: false,
         success: function(data, textStatus, jqXHR) {  
         console.log(2);
             $('.image-viewer-modal').modal('hide');
            var filter = "<?php echo $id_stc ?>";
            var tab_content_to_change = "#stock-sub-list";
            jQuery(tab_content_to_change).load('/tasks/stock/stock-list.php?filter='+filter);


         },
           error: function(jqXHR, textStatus, errorThrown){
           //Display error message to user
           alert("An error occured when saving the data");
         }
    }); 
});

这是规格上传。

#nav { 
    width:480px;
    margin:1em auto;
}    
#nav ul {
    margin:1em auto; 
    padding:0; 
    font:1em "Arial Black",sans-serif; 
}    
#nav ul li{
     display:inline;
}     
#nav ul li a{
    text-decoration:none; 
    margin:0; 
    padding:.25em 25px; 
    background:#666; color:#ffffff;
}     
#nav ul li a:hover{
    background:#ff9900; 
    color:#ffffff;
}     
#nav ul li a.active { 
    background:#ff9900; 
    color:#ffffff;
}

如何清除提交事件，以便每次点击上传按钮时，只发送一次ajax请求

非常感谢提前。

Answer 1

尝试使用Async：false 或者其他目的，您可以在立即点击后点击任何一个事件

JQuery提交表单多次/

1 个答案: