JQuery $.ajax() 怎麼執行順序跟我想的不一樣 – 非同步更新

發生了什麼事

今天在呼叫AJAX判斷時，發現怎麼執行順序跟我寫的不一樣啊

為什麼後面的動作卻比AJAX還快執行呢?

AJAX

AJAX 的全名是 “Asynchronous JavaScript and XML“，意思就是「非同步JavaScript 以及 XML」

好了，文章結束!?

哈哈哈，開玩笑的…

不過直接來看下我今天遇到的狀況吧

$.ajax({
	type: "POST",
	url: "/CheckUserName",
	data: { "UserName": UserName },
	success: function (data) {
		if (data.IsExist) {
			alert("使用者名稱不得重複!");
			return false;
		}
	}
});	

//insert 使用者的動作...

但就會看到很奇怪的事情

就是AJAX判斷完之後，應該要return false中斷的才對啊

首先，先來講講「非同步」的AJAX吧

「非同步」指的是，AJAX在那裏會先發出HTTP的請求

但整個JS會繼續往下執行，AJAX直到請求被回覆的時候才會進到 success裡面

解決方法

既然知道問題是順序，那就很好處理了

$.ajax({
	type: "POST",
	url: "/CheckUserName",
	data: { "UserName": UserName },
	success: function (data) {
		if (data.IsExist) {
			alert("使用者名稱不得重複!");
			return false;
		} else{
			callInsert();
		}
	}
});	

//呼叫insert的方法
function callInsert()
{
	....
}

直接將要處理的動作放進 AJAX 的success裡面就好了

中間要是希望多加些判斷也沒問題，像是這裡就用了IsExist去判斷

這樣就可以保證是在AJAX呼叫完才執行

結論

可能是最近太少寫AJAX了，都忘得一乾二淨了

為我的健忘留個紀錄…

參考資料

• javascript – Ajax success: {return false;} – Stack Overflow

🧡希望這篇文章有提供一點幫助~

🧡幫我點一個小小的廣告或留言，都是對我的支持(每天都只有詐騙跟色情留言…)

⭐如有任何疑問，歡迎透過留言或messenger讓我知道 !

應該算是筆記