使用 jQuery $.ajax 的 Javascript 范围查询

Question

我正在尝试编写简单的函数来检查数据库中是否存在设计师姓名。我正在使用 jQuery 的 ajax 函数来尝试这样做:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    var designer_exists =  false;
    var temp = $.ajax( { type: "GET", 
             url: "/api/check_brand_exists/", 
             data : {name : designer_name }, 
             success: function(data) {
                    designer_exists = $.parseJSON(data);
                    return designer_exists;
                }}).statusText;
    return designer_exists;
}

我已经阅读了有关 javascript 作用域的内容，但似乎仍然找不到我的错误，即 checkDesignerName 总是返回 false。我是否需要使用闭包才能使此功能正常工作？

谢谢

Answer 1

AJAX 的异步性质让您似乎难以理解。

现阶段:

return designer_exists;

您的 AJAX 调用尚未完成。只有在稍后发生的成功回调中，您才能使用结果。您不能拥有返回某些结果的函数，并且此结果取决于 AJAX 调用。您只能在成功回调中利用 AJAX 调用的结果:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    $.ajax({ 
        type: "GET", 
        url: "/api/check_brand_exists/", 
        data : { name : designer_name }, 
        success: function(data) {
            var designer_exists = $.parseJSON(data);
            // Here and only here you know whether this designer exists
            alert(designer_exists);
        }
    });
}

您当然可以对服务器执行同步调用，这是完全不推荐的做法，因为它会卡住客户端浏览器并在 AJAX 请求期间通过设置 async: false 使用户离开您的站点> 标志:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    var designer_exists = false;
    $.ajax({ 
        type: "GET", 
        url: "/api/check_brand_exists/", 
        async: false,
        data : { name : designer_name }, 
        success: function(data) {
            designer_exists = $.parseJSON(data);
        }
    });
    return designer_exists;
}

我提到这个只是为了回答的完整性，而不是你应该做的事情。

现在，因为您似乎在此处执行某种验证逻辑，所以我建议您将其作为最终解决方案:jquery.validate plugin .它有这个伟大的remote rule支持将完全满足您的需求。