$ .ajax在函数中不起作用

时间:2017-08-22 05:16:05

标签: javascript jquery html ajax

我使用jquery的ajax来解决这个问题。本质上,这个函数检查一个api,看看是否有一个名为" success"是真的。如果是,我希望此函数返回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());,但它未定义。

任何帮助都将不胜感激。

5 个答案:

答案 0 :(得分:3)

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

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

  1. loggedIn()函数中,返回$.ajax()对象。它是一个jqXHR对象,你可以添加像.done()这样的方法(成功时触发),.fail()(遇到错误时触发), or。always()`(总是这样的完成后运行。)
  2. 既然你想听取成功,那就做loggedIn.done()。内部回调是您可以实现其他逻辑来检查您的登录尝试是否成功(即通过检查success键是否为真)。
  3. 现在强烈建议不要在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...
            }
        });
    });
    

答案 1 :(得分: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>

答案 2 :(得分:0)

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>

答案 3 :(得分:0)

使用所有答案,我能够合并(主要是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>

答案 4 :(得分:-1)

如果您的 / 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);