的页面重载显示

Question

我的代码具有AJAX使得调用几个asp.net的webMethods这反过来POST数据到数据库成功。

一旦用户填写表单，并单击提交按钮，将显示一个进度条。

一旦该过程完成，进度条被隐藏并显示“谢谢，数据已成功添加”消息。

到目前为止，这么好。

问题是，只要我添加一行代码location.reload()以在提交后重新加载页面，则不再显示成功消息以及进度条。

任何想法为什么？

$("#btnSubmit").click(function (event) { 
    event.preventDefault(); 
    if (confirm('Please verify that your information is correct before submitting. Click Ok to submit, Click Cancel to make additional changes.')) { 
     var empComplete = false, sourceComplete = false, spouseComplete = false, dividentComplete = false, reimbursedComplete = false, honorariaComplete = false, giftComplete = false, orgComplete = false, creditorComplete = false; 
     function checkComplete() { 
      if (empComplete && sourceComplete && spouseComplete && dividentComplete && reimbursedComplete && honorariaComplete && giftComplete && orgComplete && creditorComplete) { 
       $("#result").text("Thank you! You have successfully completed this form"); 
      } 
     } 

     var $loading = $('#loadingDiv').hide(); 
     $(document) 
      .ajaxStart(function() { 
       $loading.show(); 
      }) 
      .ajaxStop(function() { 
       $loading.hide(); 
       location.reload(); 
      }); 

     $("#result").text(""); 
     var data = JSON.stringify(getAllEmpData()); 
     console.log(data); 
     $.ajax({ 
      url: 'closures.aspx/SaveEmpData', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ 'empdata': data }), 
      async: false, 
      success: function() { 
       empComplete = true; 
       checkComplete(); 
      }, 
      error: function() { 
       alert("Error while inserting data"); 
      } 
     }); 
     var data = JSON.stringify(getAllSourcepData()); 
     console.log(data); 
     $.ajax({ 
      url: 'closures.aspx/SaveSourceData', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ 'empdata': data }), 
      success: function() { 
       sourceComplete = true; 
       checkComplete(); 
      }, 
      error: function() { 
       alert("Error while inserting data"); 
      } 
     }); 
    } 
}); 
... 
... 
<input type="submit" id="btnSubmit" class="btn btn-primary btn-md pull-center btn-sm" value="Submit" /> 
<img id="loadingDiv" style="display:none;" src="images/ajax-loader.gif" alt="Loading..." /> 
<output id="result" style="margin-bottom:300px;margin-left:250px;color:#3c890e;font-weight:bold;font-size:18px;"></output> 

Answer 1

将数据处理留在success。但在阿贾克斯的complete移动代码隐藏（当一切都完成）。例如：

$.ajax({ 
    url: 'closures.aspx/SaveEmpData', 
    type: 'POST', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify({ 'empdata': data }), 
    async: false, 
    success: function() { 
     empComplete = true; 
    }, 
    error: function() { 
     alert("Error while inserting data"); 
    }, 
    complete: function() { 
     checkComplete(); 
    } 
}); 

我无法测试代码，因为它不是完整的解决方案。但我做了一些可能对您有所帮助的更改：

$("#btnSubmit").click(function (event) { 
    event.preventDefault(); 
    if (confirm('Please verify that your information is correct before submitting. Click Ok to submit, Click Cancel to make additional changes.')) { 
     var empComplete = false, sourceComplete = false, spouseComplete = false, dividentComplete = false, reimbursedComplete = false, honorariaComplete = false, giftComplete = false, orgComplete = false, creditorComplete = false; 
     function checkComplete() { 
      if (empComplete && sourceComplete && spouseComplete && dividentComplete && reimbursedComplete && honorariaComplete && giftComplete && orgComplete && creditorComplete) { 
       $("#result").text("Thank you! You have successfully completed this form"); 
       $loading.hide(); 
       location.reload(); 
      } 
     } 

     var $loading = $('#loadingDiv').hide(); 

     $("#result").text(""); 
     var data = JSON.stringify(getAllEmpData()); 
     console.log(data); 

     $.ajax({ 
      url: 'closures.aspx/SaveEmpData', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ 'empdata': data }), 
      async: false, 
      beforeSend: function() { 
       $loading.show(); 
      }, 
      success: function() { 
       empComplete = true; 
      }, 
      error: function() { 
       alert("Error while inserting data"); 
      } 
     }); 

     data = JSON.stringify(getAllSourcepData()); 
     console.log(data); 

     $.ajax({ 
      url: 'closures.aspx/SaveSourceData', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ 'empdata': data }), 
      success: function() { 
       sourceComplete = true; 
      }, 
      complete: function() { 
       checkComplete(); 
      }, 
      error: function() { 
       alert("Error while inserting data"); 
      } 
     }); 
    } 
});