ajax執行完之後進入error方法體,error方法體內加上alert卻又可以執行
阿新 • • 發佈:2018-11-14
描述下遇到的情況:
正常執行完ajax,會進入error方法體,並且彈窗沒有正確關閉
奇葩的是,在ajax外加上不存在的方法,雖然網頁控制檯會js報錯,但是卻進入了success的方法體,彈窗正確關閉,但是頁面沒有重新整理
看下程式碼:
console.log("確認選中檔案,上傳中..."); var formData = new FormData(); formData.append('file',vm.uploadFileInfo.file); formData.append('relatedType',vm.uploadFileInfo.relatedType); formData.append('relatedId',vm.uploadFileInfo.relatedId); //主要看ajax //將file儲存到formData中,呼叫controller的upload方法進行上傳到伺服器 //想要上傳完之後進入success,然後列印上傳成功,然後重新整理list頁面 //(本js是edit.js,父級是list.html頁面) $.ajax({ url : '../../public/uploadFile/upload?_' + $.now(), type : "post", processData : false,//告訴jQuery不要去處理髮送的資料 contentType : false,//告訴jQuery不要去設定Content-Type請求頭 data :formData, success: function(data) { //事與願違,並沒有執行success console.log("更新檔案成功:1"); $.currentIframe().vm.load(); }, error: function(data){ //進入到了error,成功打印出資訊,也重新整理了list, //但是edit的彈窗頁面和詢問框沒有正確關閉 console.log("更新檔案成功:0"); $.currentIframe().vm.load(); } }); //更神奇的是,如果加一個不存在的方法,網頁控制檯會報錯沒有此方法,但是它就會進入ajax的success方法體了!比如: vm.load();//此方法並沒有定義,在此js中也不能使用,我是因為想重新整理list頁面,誤加上去的
於是上網查閱了大量的案例,通過這個方法,看到了錯誤資訊
error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status);//返回0 alert(XMLHttpRequest.readyState); alert(textStatus);//error },
嘗試的過程中發現,error的時候給他alert()一下就好了,正確執行。
最後嘗試出了正確的寫法
解決方案:
給ajax加上:async:false
async:true 意思是非同步方式,$.ajax執行後,會繼續執行ajax後面的指令碼,直到伺服器端返回資料後,觸發$.ajax裡的success方法,這時候執行的是兩個執行緒。
async:false 意思是所有的請求均為同步請求,在沒有返回值之前,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行。
成功執行的程式碼:
console.log("確認選中檔案,上傳中..."); var formData = new FormData(); formData.append('file',vm.uploadFileInfo.file); formData.append('relatedType',vm.uploadFileInfo.relatedType); formData.append('relatedId',vm.uploadFileInfo.relatedId); $.ajax({ url : '../../public/uploadFile/upload?_' + $.now(), type : "post", processData : false,//告訴jQuery不要去處理髮送的資料 contentType : false,//告訴jQuery不要去設定Content-Type請求頭 data :formData, async:false, success: function(data) { console.log("更新檔案成功!"); $.currentIframe().vm.load(); }, error: function(XMLHttpRequest, textStatus, errorThrown) { //觀察錯誤資訊 //console.log(XMLHttpRequest.status); //console.log(XMLHttpRequest.readyState); //console.log(textStatus); $.currentIframe().vm.load(); } });