从动态加载的页面调用的 AJAX 返回异步结果

Posted

技术标签:

【中文标题】从动态加载的页面调用的 AJAX 返回异步结果【英文标题】:Return asynchronous result from AJAX called from dynamically loaded page 【发布时间】:2019-05-26 23:00:58 【问题描述】:

目前我有一个使用 jQuery 加载的页面,如下所示:

$('#content').load('mypage.html');

这在site.js 内部调用。在加载的页面中,我加载了一个脚本,我试图从中返回一个异步结果,因此它不会冻结。

页面如下:

<div id="mycontent"></div>

<script type="text/javascript" src="js/getmycontent.js"></script>
<script type="text/javascript">
    $(function() 
        $('body').ajaxComplete(function() 

            var ids = 
                "h1": 123,
                "h2": 12345
            ;

            //$('.loader-wrapper').show();

            // Iterate over id numbers
            $.each(ids, function(k, v) 
                var mylist;

                var call = getMyList(v).done(function(r) 
                    if(r) 
                        mylist = r.mylist;
                     else 
                        mylist = null;
                    
                ).fail(function(x) 
                    alert(x);
                );

                console.log(mylist);

            );

            //$('.loader-wrapper').hide();
        );
    );
</script>

这里是getmycontent.js

function getMyList(id) 
    var url = 'https://api.myurl.org/v1/lists/' + id;
    return $.ajax(
        url: url,
        type: 'get',
        dataType: 'json'
    );

当我在 body 上使用 ajaxComplete 函数时,控制台不会记录任何内容,但我正在阅读,这就是有人建议我为动态加载的页面所做的事情。

当我删除 ajaxComplete 调用时,我在控制台中得到了这个:

send @ jquery.min.js:2
ajax @ jquery.min.js:2
w._evalUrl @ jquery.min.js:2
Re @ jquery.min.js:2
append @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
z @ jquery.min.js:2
html @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.fn.load @ jquery.min.js:2
(anonymous) @ site.js:20
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
6VM400:34 undefined

这是来自控制台的 VM400:

$(function() 
        $('body').ajaxComplete(function() 

            var ids = 
                "h1": 123,
                "h2": 12345
            ;

            //$('.loader-wrapper').show();

            // Iterate over id numbers
            $.each(ids, function(k, v) 
                var mylist;

                var call = getMyList(v).done(function(r) 
                    if(r) 
                        mylist = r.mylist;
                     else 
                        mylist = null;
                    
                ).fail(function(x) 
                    alert(x);
                );

                console.log(mylist);

            );

            //$('.loader-wrapper').hide();
        );
    );

【问题讨论】:

【参考方案1】:

这可能是由于以下原因:

补充说明:

从 jQuery 1.9 开始,jQuery global Ajax events 的所有处理程序,包括使用 .ajaxComplete() 方法添加的处理程序,必须附加到 document。 如果在将global 选项设置为false 的情况下调用$.ajax()$.ajaxSetup(),则.ajaxComplete() 方法将不会触发。

有关$.ajaxComplete() 的更多信息,请查看documentation。

【讨论】:

【参考方案2】:

已通过分别更改 page.htmlgetmycontent.js 文件解决了该问题。使用回调允许我在检索数据后处理数据。见ASync Callback Promise。

page.html:

<div id="mycontent"></div>

<script type="text/javascript" src="js/getmycontent.js"></script>
<script type="text/javascript">
    function callback(result)  console.log(result) 

    $(function() 
            var ids = 
                "h1": 123,
                "h2": 12345
            ;

            //$('.loader-wrapper').show();

            // Iterate over id numbers
            $.each(ids, function(k, v) 
                var call = getMyList(v, callback);
            );
    );
</script>

getmycontent.js:

function getMyList(id, callback) 
    var url = 'https://api.myurl.org/v1/lists/' + id;
    $.ajax(
        url: url,
        type: 'get',
        dataType: 'json',
        async: true,
        success: callback
    );

【讨论】:

虽然我很高兴问题得到解决,但这个答案改变了原始答案的功能。在这里,您只需在 DOM 准备好加载后执行一些代码。而在问题中,您设置了一个全局 ajaxComplete 处理程序,该处理程序在每次完成 $.ajax() 请求后执行。这也可能是您自己的答案被否决的原因。 @JohanWentholt 我确实在我的原始答案中声明,我使用 ajaxComplete 是我尝试修复,我确实声明最终结果(错误)是我没有使用的结果ajaxComplete. 从阅读问题中我不太清楚。在这种情况下,您可能希望将来更清楚地提出您的问题。一个好的起点总是 1. 描述代码应该做什么。 2. 如果有,请描述输入和/或输出。 3. 举个例子。请查看Help Center - How do I ask a good question?,了解有关好问题的更多详细信息。 句子 “这在 site.js 内部被调用。在加载的页面中,我已经加载了一个脚本,我试图从中返回一个异步结果,因此它不会冻结。” 有一些问题。 1. 从什么返回到哪里? 2. 什么冻结?我想你明白了。

以上是关于从动态加载的页面调用的 AJAX 返回异步结果的主要内容,如果未能解决你的问题,请参考以下文章

jquery mobile listview使用ajax动态加载后,跳转到其他页面返回时数据没有保存如何解决?

如何爬动态加载的页面?ajax爬虫你有必要掌握

页面一个post请求,后台执行将近5分钟后返回结果但是页面获取不到返回值,一直显示加载中,不是ajax请求

ajax异步加载问题

Python爬虫-05:Ajax加载的动态页面内容

Echarts通过Ajax实现动态数据加载