跳过 Ajax 调用答案

【问题标题】：Ajax call being skipped跳过 Ajax 调用
【发布时间】：2013-12-03 14:11:33
【问题描述】：

我在下面的 javascript 中遇到问题，其中没有调用 $.ajax 调用。 alert('foo') 确实发生了，但随后数据调用被完全跳过并且从未到达回调（永远不会得到 alert('success!')。我不完全理解回调，但这似乎应该可以工作。

编辑

将脚本编辑到我目前的位置，因为我读过这种方式是更好的做法。不过，我可以进入authenticate()，它在url:[...] 上中断，但实际上从未进行过ajax 调用。我尝试删除 return 只是为了看看这是否是问题所在，但它产生了相同的结果。

define(["jQuery", "kendo", "modernizr", "app/environment"], function ($, kendo, modernizr, environment) {
    var authenticate = function (username, password) {
        return $.ajax({
            url: environment.apiConnection + '/canlogin?userid=' + username + '&password=' + password,
            type: 'get',
            dataType: 'jsonp'
        });
    }

    var canLogin = function(data) {
        alert('good');
    }

    return {
        viewModel: kendo.observable({
            username: null,
            password: null,
            authenticate: function () {
                var username = this.get('username'),
                    password = this.get('password');

                authenticate(username, password).done(canLogin);
            }
        })
    }
});

【问题讨论】：

jsonp请求无法同步
我明白了，谢谢。有没有人有正确的方法来做我想做的事情？
见这里：stackoverflow.com/questions/14220321/…
您是否在 ajax 行收到脚本错误？或者environment.apiConnection 有什么好玩的？
否定的，我什至只是尝试对其进行硬编码并得到相同的结果。我刚刚尝试了一项更改，将 canlogin 更改为不接受回调和return $.ajax[...]。然后我这样称呼它canLogin(username, password).done(authenticate)，其中身份验证看起来就像alert('foo')...无论如何，结果相同。

标签： javascript jquery ajax requirejs kendo-mobile

【解决方案1】：

改用回调。

var canLogin = function (username, password, callback) {
    $.ajax({
        async: false,
        url: config.apiConnection + '/canlogin?userid=' + username + '&password=' + password,
        type: 'GET',
        dataType: 'jsonp',
        error: function (x, t, r) {
            alert('Error');
        },
        success: callback
    });

}

// use
canLogin("user","passwd",function( data ){
    alert("Im called on authentication success!");
});

【讨论】：

谢谢，我试过了，但还是不行。我注意到 API 调用也没有发生（除非我在 $.ajax 上中断，然后跨过它，然后它可以工作）

【解决方案2】：

解决方案是e.preventDefault() 和在ajax 调用中使用回调的混合。仅使用回调并不能解决问题，但是将 preventDefault 添加到 authenticate 函数并修复回调问题即可。

最终的工作版本现在看起来像这样：

define(["jQuery", "kendo", "modernizr", "app/environment"], function ($, kendo, modernizr, environment) {
    function authenticate(username, password, callback) {
        $.ajax({
            url: environment.apiConnection + '/canlogin?userid=' + username + '&password=' + password,
            type: 'get',
            dataType: 'jsonp',
            success: callback,
            error: function (x,t,r) {
                console.log('error')
            }
        });
    }

    function login(canLogin, username, password) {
        if (canLogin == false) {
            alert('Incorrect username or password');
            return;
        }

        alert('good');
    }

    return {
        viewModel: kendo.observable({
            username: null,
            password: null,
            authenticate: function (e) {
                e.preventDefault();
                var username = this.get('username'),
                    password = this.get('password');

                authenticate(username, password, function (canLogin) {
                    login(canLogin, username, password);
                });
            }
        })
    }
});

【讨论】：