初學者使用json+ajax作註冊判斷的時候容易犯的一個錯誤

 1 function checkUsername() {
 2 $.post("user","action=checkusername&username="+$("#username").val(),function (result) {
 3 var flag = result.data;
 4 if(!flag){
 5 //使用者名稱已經被重複註冊了
 6 $("#errors").html("該使用者名稱不可用")
 7return false;
 8 }else{
 9 $("#errors").html("");
10return true;
11 }
12 } ,"json");
13 }

View Code

2 我在註冊按鈕上繫結點選事件,再次驗證使用者名稱是否可用,根據判斷決定是否進行註冊

 1 function register() {
 2 if(checkUsername()){//再次傳送非同步請求
 3 $.post("user","action=register&username="+$("#username").val()+"&password="+$("#pwd").val(),function (result) {
 4 var flag = result.data;
 5 if(flag){
 6 location.href = "login.html";
 7 }else {
 8 alert("註冊失敗");
 9 }
10 },"json");
11 }else {
12 alert("註冊失敗");
13 }
14 }

View Code

總結,以上的錯誤程式碼的原因checkUsername()的返回值是undefined,原因是非同步請求不會等到它的function函式執行完才退出,所以在沒有得到返回值的時候,函式已經結束了,所以無論使用者名稱是否被通過校驗都會進行註冊

解決辦法有兩種:

1 將非同步請求更改為同步請求;   (現在主流的都是前後端分離,所以建議使用非同步請求)

2 抽取一個全域性儲存非同步請求的返回值即可

以下是我除錯成功的程式碼:

1 我在註冊頁面中register.html中使用者輸入框失去焦點的時候傳送非同步請求,判斷當前使用者有沒有被註冊過,結果返回顯示在頁面提示使用者.非同步請求的函式如下所示:

 1 var res_username = false; //使用全域性變數儲存返回的值,一開始預設為false
 2 function checkUsername() {
 3 $.post("user","action=checkusername&username="+$("#username").val(),function (result) {
 4 var flag = result.data;
 5 if(!flag){
 6 //使用者名稱已經被重複註冊了
 7 $("#errors").html("該使用者名稱不可用")
 8 res_username= false;
 9 }else{
10 $("#errors").html("");
11 res_username= true;
12 }
13 } ,"json");
14 }

View Code

 1 function register() {
 2 if(res_username){
 3 $.post("user","action=register&username="+$("#username").val()+"&password="+$("#pwd").val(),function (result) {
 4 var flag = result.data;
 5 if(flag){
 6 location.href = "login.html";
 7 }else {
 8 alert("註冊失敗");
 9 }
10 },"json");
11 }else {
12 alert("註冊失敗");
13 }
14 }

View Code