在ajax加载后显示内容

Question

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

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

这可以正常工作，但是我想将它们分离为单独的功能-一个用于获取数据，另一个用于显示数据。 这样，我可以将数据存储在全局变量中，并在显示数据和其他数据之间切换，而不必每次都调用ajax请求。

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

谢谢

编辑：

我想避免成功调用display函数，因为我希望该函数能够在后台运行-存储数据以备将来使用。 我可以-但是要将其存储在全局变量中。 有没有一种“监听”该变量的方法来检测“ attribute-x”是否存在？

Answer 1

完全不建议使用jqXHR.success()函数。 $.ajax()带有递归对象形式的promise，您可以将.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的函数完整地放置在代码中的任何位置。 几个月前，我写了一篇文章，以一种更清晰，更清洁，更高效的方式编写 AJAX-被认为是无耻的自插式，但我认为这与您的情况有关。

如果要动态更改要调用的URL，只需返回$.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());
}