1. 程式人生 > >ajax執行完之後進入error方法體,error方法體內加上alert卻又可以執行

ajax執行完之後進入error方法體,error方法體內加上alert卻又可以執行

描述下遇到的情況:

正常執行完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();
    }
});