Ajax调用两次

Question

我正在使用ajax调用上传pdf文件。触发上传按钮后，ajax调用两次。我检查了整个代码。但无法获得任何解决方案。请帮我:)

我的代码， HTML：

<div class="uk-form-row"> 
     <div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div> 
     <div id="targetUpload"></div> 
     <label class="uploadLbl">Upload Book:</label> 
     <div class="uploadWrap"> 
      <input name="pdfFile" id="pdfFile" type="file" size="30" /> 
      <input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" /> 
     </div> 
    </div> 

Ajax代码：

function uploadPDF(){ 
$("#frm").attr("action","upload.php"); 
$("#loadingPDFUpload").show(); 
$("#frm").ajaxForm({ 
    target: '#targetUpload', 
    complete: function(){ 
     $("#loadingPDFUpload").hide(); 
    } 
}).submit();} 

Answer 1

你有一个提交按钮调用该函数，但随后该函数使用的形式submit方法。这可能会触发该函数的双重调用。

我看到你使用jQuery和jQuery表单插件，所以这应该是相对容易解决的。我会直接在JavaScript中创建事件处理程序以避免混乱的标记。删除您的提交按钮的onclick属性：

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" /> 

然后做这样的事情在你的代码：

$(document).ready(function() { 
    $('#frm').submit(function(e) { 
     e.preventDefault(); //stops the default submit action 
     $('#loadingPDFUpload').show(); 
     $(this).attr('action', 'upload.php'); 
     $(this).ajaxForm({ 
      target: '#targetUpload', 
      complete: function(){ 
       $("#loadingPDFUpload").hide(); 
      }); 
     }); 
    }) 
}); 

Answer 2

您正在使用形式触发您的Ajax调用

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" /> 

提交按钮所以当你触发时点击它调用了uploadPDF（）函数也提交你的表格后提交（）函数。这就是为什么这个功能是两次调用。

Answer 3

尝试在ajaxForm请求结束时删除提交。它再次提交表单。也请更新您的HTML代码。我无法在任何地方看到#frm。

Answer 4

函数uploadPDF（）应该返回false，以防止正常的表单提交。

在文档示例代码

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});