ajax加载后显示内容

display contents after ajax load

本文关键字：显示 加载 ajax      更新时间：2023-09-26

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

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

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

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

感谢

编辑：

我想避免在成功时调用display函数，因为我希望这个相同的函数能够在后台运行——存储数据以备将来使用。我确实想把它存储在一个全局变量中。是否有一种"监听"该变量的方法来检测"attribute-x"是否存在？

事实上，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);
});

如果我正确理解你，你就不能做一些事情吗…

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());
}
相关文章：