【筆記】關於jq $.ajax 函數 success回調函數不能賦正確值或返回正確值的問題

最近在一個項目里面打算實現如下功能：

當我注冊賬號的時候當輸入賬號完畢后輸入框失焦時執行一個 ajax 請求，驗證賬號是否被注冊，並未這個輸入框的 isCorrect屬性賦值，如果沒有被注冊 isCorrect屬性值為“true”，否則為 “false”。代碼如下：

ajax: function(obj){
            /*
                {    
                    elem: //驗證的元素,
                    hintsContent: //提示框元素,
                    errorColor: //錯誤時顯示的顏色,
                    url: //后台處理頁地址,
                    reqData: //發送過去的內容（以對象的形式保存）
                    correctBool: //返回數據的正確值值名
                    errorBool: //返回數據的錯誤值名
                    result: //返回的數據鍵名
                }
            */
            var that = this;
            var bool;
            var id = obj["elem"].id;
            console.log(id);
            obj["elem"].isCorrect = false;
            var hintsContain = this.findHintsContain(obj["elem"],obj["hintsContent"]);
            //整理為json 字符串
            var formateData = JSON.stringify(obj["reqData"]);

            //保存后台返回鍵的名
            var resultCode = obj["result"]
            
            $.ajax({
                url: obj["url"],
                type: 'GET',
                async: false,
                dataType: 'json',
                data: formateData,
                success: function(data){
                    /*
                        返回的數據格式
                        {"result":"true/false"}
                    */
                    //如果返回結果為false 則顯示錯誤信息

                    if (data[resultCode] == obj["errorBool"]) {
                        hintsContain.innerText = that.hintsData[id]["ajaxError"];
                        hintsContain.style.color = obj["errorColor"];
                        hintsContain.style.visibility = 'visible';
                        obj["elem"].isCorrect = false;
                        bool = false;
                    }else{
                        obj["elem"].isCorrect = true;
                        bool = true;
                    }
                }
            });

            return bool;
            
        }

上面的代碼是自己封裝的一個表單驗證類中的一個方法，大致意思就是當元素需要進行驗證時發送一個ajax 請求驗證，參數是以一個 json 對象傳進去的

方法的一開始就首先為元素的 isCorrect 屬性賦初值 “false”（開頭提及到的屬性）

但是有意思的是在回調函數中卻不能給這個值賦正確的值

 

success: function(data){
                    /*
                        返回的數據格式
                        {"result":"true/false"}
                    */
                    //如果返回結果為false 則顯示錯誤信息

                    if (data[resultCode] == obj["errorBool"]) {
                        hintsContain.innerText = that.hintsData[id]["ajaxError"];
                        hintsContain.style.color = obj["errorColor"];
                        hintsContain.style.visibility = 'visible';
                        obj["elem"].isCorrect = false;
                        bool = false;
                    }else{
                        obj["elem"].isCorrect = true;
                        bool = true;
                    }
                }

 

上面這行代碼就是通過請求成功之后返回的值，可見我通過后台發送過來的信息判斷輸入框是否正確，當時最初的時候元素的 isCorrect 屬性一直是返回 “false”無論后台給出什么數據。

 

---------------重點---------------

於是問了度娘一把，才知道ajax 請求在異步發送和接收的時候因為有時候連服務器都未返回數據就執行了請求成功的函數所以未能返回正確的值，導致無法給指定的變量賦正確的值。

於是解決方法就是把異步請求改為同步請求，這個問題得以解決：

$.ajax({
    url: obj["url"],
    type: 'GET',
    async: false,
    dataType: 'json',
    data: formateData,

jq 的ajax 方法屬性 async 改為 false即可