笔记关于jq $.ajax 函数 success回调函数不能赋正确值或返回正确值的问题

Posted 2020-09-14 Stitch晨

最近在一个项目里面打算实现如下功能：

当我注册账号的时候当输入账号完毕后输入框失焦时执行一个 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即可