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

日常越不留意的東西越容易犯錯,前些天在作註冊案例的時候,用到了 json+ajax來發送異步請求來判斷當前的用戶有沒有被註冊過,而後在註冊按鈕進行終極校驗決定是否進行註冊的時候,遇到了一個bug困擾了好久,後來通過本身的不斷的調試和百度解決了,在此我將遇到的問題使用僞代碼跟你們分享一下,讓你們遇到我這個坑的時候輕鬆越過.

 

(如下是錯誤案例)

    1 我在註冊頁面中register.html中用戶輸入框失去焦點的時候發送異步請求,判斷當前用戶有沒有被註冊過,結果返回顯示在頁面提示用戶.異步請求的函數以下所示:

 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("該用戶名不可用")  7     return false;  8 }else{  9 $("#errors").html(""); 10     return 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

　　2 我在註冊按鈕上綁定點擊事件,再次驗證用戶名是否可用,根據判斷決定是否進行註冊

 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

 

 

 

 

 

 

 

 

 

原文出處：https://www.cnblogs.com/songyoulian/p/10055793.html