从动态加载的页面调用的 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.html
和 getmycontent.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动态加载后,跳转到其他页面返回时数据没有保存如何解决?