Question

我有一个当前调用ajax请求的函数，然后按以下方式在我的页面上显示内容：

$.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp',
        success: function (data) {
            //insert data to page
        }

这很好但我想将它们分成单独的函数 - 一个用于获取数据，另一个用于显示数据。这样我就可以将数据存储在全局变量中，并在显示它和其他数据之间切换，而不必每次都调用ajax请求。

我环顾四周但是在执行显示功能之前找不到如何等待第一个函数的Ajax请求完成。有人能帮忙吗？

由于

编辑：

我想避免成功调用显示功能，因为我希望这个功能能够在后台运行 - 存储数据以备将来使用。我这样做 - 但是想把它存储在一个全局变量中。有没有办法“监听”该变量以检测“attribute-x”是否存在？

Answer 1

实际上，jqXHR.success()函数已被弃用。 $.ajax()本身带有延迟对象形式的承诺，您可以将.done()链接到文档中的任何位置以收听成功呼叫。

// Make AJAX call
var ajaxCall = $.ajax({
    type: 'GET',
    url: dataURL,
    dataType: 'jsonp'
});

// Can be anywhere else (upstream or downstream, doesn't matter)
ajaxCall.done(function(data) {
    console.log(data);

    // Do whatever you want, will be called upon completion of AJAX call
});

使用延迟对象的原因很简单 - 您没有过多的函数嵌套，并且您可以在代码中的任何位置放置处理AJAX的函数。几个月前我有written an article on writing AJAX in a clearer, cleaner and more efficient way - 被认为是无耻的自我插件，但我觉得这与你的情况有关。

如果您想动态更改要拨打的网址，只需返回$.ajax()功能：

// Make AJAX call
var ajaxCall = function(dataURL) {
    return $.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp'
    });
}

// Can be anywhere else (upstream or downstream, doesn't matter)
ajaxCall('/path/to/url').done(function(data) {
    console.log(data);

    // Do whatever you want, will be called upon completion of AJAX call
});

这是一个小提琴，尽管已修改为使用JSON，它证明了上述逻辑的合法性：http://jsfiddle.net/teddyrised/hw89td47/

更好：您可以使用相同的句柄进行多个AJAX调用，并使用$.when()和$.then()同时评估所有这些调用：

// Make AJAX call
var ajaxCall = function(dataURL) {
    return $.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp'
    });
}

// Can be anywhere else (upstream or downstream, doesn't matter)
var call1 = ajaxCall('/path/to/url/1'),
    call2 = ajaxCall('/path/to/url/2'),
    call3 = ajaxCall('/path/to/url/3');

$.when(call1, call2, call3).then(function(p1, p2 ,p3) {
    console.log(p1.data);
    console.log(p2.data);
    console.log(p3.data);
});

Answer 2

如果我理解你的话，你就不能做一些像......

var xContent;

$.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp',
        success: function (data) {      
            xContent = data; // this stores the ajax data
            LoadXContent();
        }
});

function LoadXContent(){
    $(".class").html($(xContent).html());
}

在ajax加载后显示内容

2 个答案: