[英]Return asynchronous result from AJAX called from dynamically loaded page
Currently I have a page which I have loaded using jQuery as follows: 目前,我有一个使用jQuery加载的页面,如下所示:
$('#content').load('mypage.html');
This is called inside site.js
. 这称为site.js
内部。 Inside the loaded page, I have loaded a script which I am trying to return an asynchronous result from, so it does not freeze. 在加载的页面中,我已经加载了一个脚本,试图从中返回异步结果,因此它不会冻结。
The page is as follows: 页面如下:
<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>
Here is the getmycontent.js
: 这是getmycontent.js
:
function getMyList(id) {
var url = 'https://api.myurl.org/v1/lists/' + id;
return $.ajax({
url: url,
type: 'get',
dataType: 'json'
});
}
The console doesn't log anything when I have the ajaxComplete
function on body
, but I was doing some reading and this is what someone suggested I do for dynamically loaded pages. 当我在body
上具有ajaxComplete
函数时,控制台不会记录任何内容,但是我正在阅读,这是有人建议我对动态加载的页面进行的操作。
When I remove the ajaxComplete
call, I get this in the console: 当我删除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
This is VM400 from the console: 这是来自控制台的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();
});
});
This might be because of the following reason: 这可能是由于以下原因:
Additional Notes: 补充笔记:
- As of jQuery 1.9, all the handlers for the jQuery global Ajax events , including those added with the
.ajaxComplete()
method, must be attached todocument
. 从jQuery 1.9开始,所有用于jQuery全局Ajax事件的处理程序,包括那些添加了.ajaxComplete()
方法的处理程序,都必须附加到document
。- If
$.ajax()
or$.ajaxSetup()
is called with theglobal
option set tofalse
, the.ajaxComplete()
method will not fire. 如果在global
选项设置为false
情况下调用$.ajax()
或$.ajaxSetup()
,则不会触发.ajaxComplete()
方法。
For more info about $.ajaxComplete()
have a look at the documentation . 有关$.ajaxComplete()
更多信息,请参阅文档 。
The issue has been resolved by changing the page.html
and getmycontent.js
files respectively. 通过分别更改page.html
和getmycontent.js
文件,此问题已解决。 Using a callback allowed me to handle the data once it has been retrieved. 使用回调使我可以在检索到数据后处理它们。 See ASync Callback Promise . 请参阅ASync回调承诺 。
page.html
: 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
: 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
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.