Question

我使用jquery的ajax来解决这个问题。本质上，这个函数检查一个api，看看是否有一个名为＆＃34; success＆＃34;是真的。如果是，我希望此函数返回true。如果成功是错误的，我希望它返回false。

这是我的代码：

function loggedIn() {
    $.ajax({
        type: "GET",
        url: "/api/auth",
        success: function (a) {
            if (a.success == "true") {
                return true;
            } else {
                return false;
            }
        }
    });
}

这段代码实际上是在一个文件（myjs.js等）中，并且在实际调用该函数之前被调用到html文件中。我在HTML中有一个脚本标记，用于调用此函数。这是：

<script type="text/javascript">
    $(function() {
        if (loggedIn() == true) {
            $('#send-to-user-btn').css('display', 'block');
            $('#sign-in-button-btn').css('display', 'none');
            $('#login-bar-my').css('display', 'none');
        }
    });
</script>

我在脚本标记中放了一个console.log(loggedIn());，但它未定义。

任何帮助都将不胜感激。

Answer 1

由于AJAX本质上是异步的，因此您无法简单地检查函数返回的值。在运行时调用AJAX函数时，无法保证从API端点收到响应。

相反，您想要的是在解析从异步请求返回的promise时检查值。您可以这样做：

在loggedIn()函数中，返回$.ajax()对象。它是一个jqXHR对象，你可以添加像.done()这样的方法（成功时触发），.fail()（遇到错误时触发）, or。always（）`（总是这样的完成后运行。）
既然你想听取成功，那就做loggedIn.done()。内部回调是您可以实现其他逻辑来检查您的登录尝试是否成功（即通过检查success键是否为真）。

现在强烈建议不要在jqXHR.success中使用$.ajax回调：它在1.8中被正式弃用，而在3.0中删除（这也是为什么这么多的原因之一插件/站点在升级到jQuery 3时会中断。）

以下是一个例子：

$(function() {
    // Return promise
    var loggedIn = function () {
        return $.ajax({
            type: "GET",
            url: "/api/auth"
        });
    };

    loggedIn().done(function(response) {
        if (response.success) {
             // If loggedIn returns success
            $('#send-to-user-btn').css('display', 'block');
            $('#sign-in-button-btn').css('display', 'none');
            $('#login-bar-my').css('display', 'none');
        } else {
            // Otherwise...
        }
    });
});

Answer 2

您无法从ajax电话中返回结果。您需要将您的逻辑放在success函数回调中。您也可以使用Promise based方法

function loggedIn() {
    $.ajax({
        type: "GET",
        url: "/api/auth",
        success: function (a) {
            if (a.success == "true") {
                   return Promise.resolve("true");
            } else {
                   return Promise.reject("someValue");
            }
        }
    });
}

<script type="text/javascript">
    $(function() {
        loggedIn().then(res => {
            $('#send-to-user-btn').css('display', 'block');
            $('#sign-in-button-btn').css('display', 'none');
            $('#login-bar-my').css('display', 'none');
        });
    });
</script>

Answer 3

jQuery ajax，在内部调用浏览器的xhr对象，由浏览器异步处理，因此，通过调用loggedIn函数调用的控件将完成，它所做的就是注册ajax请求，哪个浏览器与服务器分开。

更改您的功能以接受如下所示的回调：

function loggedIn(successCallBack) {
    $.ajax({
        type: "GET",
        url: "/api/auth",
        success: function (a) {
             if(typeof successCallBack == 'function'){
                 successCallBack(a.success);
             }
        }
    });
}

并将其称为：

<script type="text/javascript">
    $(function() {
        loggedIn(function(result){
               if (result) {
                   $('#send-to-user-btn').css('display', 'block');
                   $('#sign-in-button-btn').css('display', 'none');
                   $('#login-bar-my').css('display', 'none');
            } else {
                // Your logic here
            }
        });
    });
</script>

Answer 4

使用所有答案，我能够合并（主要是Terry的答案），以提出一个有效的解决方案。（谢谢你的所有答案！）。这是myjs.js文件：

function loggedIn() {
    return $.ajax({
        type: "GET",
        url: "/api/auth",
    });
}

这是脚本页面，我在loggedIn之后添加了（），一切看起来都很完美：

<script type="text/javascript">
    loggedIn().done(function(response) {
        if (response.success == 'true') {
             // If loggedIn returns success
            $('#send-to-user-btn').css('display', 'block');
            $('#sign-in-button-btn').css('display', 'none');
            $('#login-bar-my').css('display', 'none');
        } else {
            // Otherwise...
        }
    });
</script>

Answer 5

如果您的 / api / auth 控制器返回具有数据字段success属性的JSON对象，则可以使用外部变量。将async选项设置为false以防止异步执行。

function loggedIn() { 
  let isAuthorized = false;
  $.ajax({ 
    type: "GET", 
    url: "/api/auth", 
    async: false,
    success: function (a) { 
      isAutorized = (a.success == "true");
    }
  });
  return isAuthorized;
}

但强烈建议不要使用同步AJAX（请参阅documentation中的详细信息）。相反，您可以将任何函数发送到loggedIn作为参数，以便在授权请求成功时执行一个。例如：

function loggedIn(delegate) { 
  $.ajax({ 
    type: "GET", 
    url: "/api/auth", 
    success: function (a) { 
      if (a.success == "true") delegate();
    }
  });
}

// Call LoggedIn with delegate:
loggedIn(function() {
  $('#send-to-user-btn').css('display', 'block'); 
  $('#sign-in-button-btn').css('display', 'none'); 
  $('#login-bar-my').css('display', 'none');
});

//or
var setStyle = function() {
  $('#send-to-user-btn').css('display', 'block'); 
  $('#sign-in-button-btn').css('display', 'none'); 
  $('#login-bar-my').css('display', 'none');
};
loggedIn(setStyle);

$ .ajax在函数中不起作用

5 个答案: