Javascript 使用Ajax获取数据后触发jQuery重新绘制
大家好 长时间的听众，第一次的海报 我有一个客户，他得到了一个看似非常复杂的功能。他们希望在访问者成功登录到他们的帐户后，将3个独立页面的内容加载到一个页面中。他们希望这种情况在不刷新页面的情况下发生。Ajax就是解决方案。但是，我对Ajax没有经验 我不知道如何判断$.get命令（使用jQuery的Ajax命令）何时完成了内容加载。我的方法是，一旦登录成功，就去获取3个单独的页面，将它们的XHTML内容加载到变量中，然后重新绘制页面。下面您将看到我的伪代码。我使用“XXItemXX”代表实际路径。我试图拉入的每个结果页面都有一个div，其类“content”围绕着我要检索的数据。XHTML如下所示：Javascript 使用Ajax获取数据后触发jQuery重新绘制,javascript,jquery,ajax,simultaneous,simultaneous-calls,Javascript,Jquery,Ajax,Simultaneous,Simultaneous Calls,大家好 长时间的听众，第一次的海报 我有一个客户，他得到了一个看似非常复杂的功能。他们希望在访问者成功登录到他们的帐户后，将3个独立页面的内容加载到一个页面中。他们希望这种情况在不刷新页面的情况下发生。Ajax就是解决方案。但是，我对Ajax没有经验 我不知道如何判断$.get命令（使用jQuery的Ajax命令）何时完成了内容加载。我的方法是，一旦登录成功，就去获取3个单独的页面，将它们的XHTML内容加载到变量中，然后重新绘制页面。下面您将看到我的伪代码。我使用“XXItemXX”代表实际路
<html>
<head>
<title>Page Name</title>
</head>
<body>
<div id="header">...</div>
<div class="content">
.
.
.
</div>
<div id="footer">...</div>
</body>
</html>
页面名称
...
.
.
.
...
<script type="text/javascript">
$('XXLoginFormXX').submit(function () {
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
beforeSend: function() {
$('<div class="loading">Loading...</div>').insertBefore('XXLoginFormXX').css('position','absolute');
},
success: function(data) {
// On successful login, draw page.
$('.loading').fadeOut('slow');
var dr_editProfileXHTML, dr_accountOrderListXHTML, dr_wishListsXHTML;
$.get('XXPathToEditProfilePageXX', function(data1){
var dr_editProfileXHTML = $('div.content', data1);
});
$.get('XXPathToAccountOrderListPageXX', function(data2){
var dr_accountOrderListXHTML = $('div.content',data2);
});
$.get('XXPathToWishListsPageXX', function(data3){
var dr_wishListsXHTML = $('div.content',data3);
});
$('div.content').fadeOut(function(){
$(this).html(dr_editProfileXHTML);
$('XXEditProfileXHTMLXX').before(dr_accountOrderListXHTML);
$('XXEditProfileXHTMLXX').before(dr_wishListsXHTML);
}).fadeIn();
}
});
return false;
});
</script>
$（'XXLoginFormXX'）。提交（函数（）{
$.ajax（{
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据：$（this）.serialize（），
beforeSend:function（）{
$（'Loading…'）.insertBefore（'XXLoginFormXX'）.css（'position'，'absolute'）；
},
成功：函数（数据）{
//成功登录后，绘制页面。
$（'.loading'）.fadeOut（'slow'）；
var dr_editProfileXHTML、dr_accountOrderListXHTML、dr_wishListsXHTML；
$.get（'XXPathToEditProfilePageXX'，函数（数据1）{
var dr_editProfileXHTML=$（'div.content'，data1）；
});
$.get（'XXPathToAccountOrderListPageXX'，函数（数据2）{
var dr_accountOrderListXHTML=$（'div.content'，data2）；
});
$.get（'XXPathToWishListsPageXX'，函数（数据3）{
var dr_wishListsXHTML=$（'div.content'，数据3）；
});
$（'div.content'）.fadeOut（函数（）{
$（this.html（dr_editProfileXHTML）；
$（'XXEditProfileXHTMLXX'）。在（dr_accountOrderListXHTML）之前；
$（'XXEditProfileXHTMLXX'）。之前（dr_wishListsXHTML）；
}).fadeIn（）；
}
});
返回false；
});
Sylvan012如果您的问题是等待所有3个请求都返回，那么：
绘图drawingdrawing在人们的慷慨帮助下完成这项工作后，我相信我已经得到了。我要感谢戴夫·布莱恩，他教会了我什么时候，什么时候，什么时候 下面是我提出的伪代码。它似乎起作用了！当然有很多清理工作要做，但所有三个页面现在都被拉进来了！哇 你觉得我的解决方案怎么样
<script type="text/javascript">
$('XXLoginFormXX').submit(function () {
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
beforeSend: function() {
$('<div class="loading">Loading...</div>').insertBefore('XXLoginFormXX').css('position','absolute');
},
success: function(data) {
// On successful login, draw page.
var Page01XHTML;
var Page02XHTML;
var Page03XHTML;
$.when(
$.get('XXPathToEditProfilePageXX', function(data1){
var Page02XHTML = $('div.content', data1);
}),
$.get('XXPathToAccountOrderListPageXX', function(data2){
var Page03XHTML = $('div.content',data2);
}),
$.get('XXPathToWishListsPageXX', function(data3){
var Page01XHTML = $('div.content',data3);
})
).then(function(Page02XHTML,Page03XHTML,Page01XHTML){
$('.loading').fadeOut('slow');
$('div.content').fadeOut(function(){
$(this).attr('id','MyAccount').html(' ' + Page01XHTML + Page03XHTML + Page02XHTML + ' ').parents('body').find('.content').each(function(){
dr_thisID = $(this).attr('id');
if (dr_thisID != 'MyAccount') {
$(this).appendTo($('div#MyAccount'));
}
}).parents('div#MyAccount').children().each(function(){
dr_thisClass = $(this).attr('class');
if (dr_thisClass != 'content') {
$(this).remove();
}
});
}).fadeIn();
});
}
});
return false;
});
</script>
$（'XXLoginFormXX'）。提交（函数（）{
$.ajax（{
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据：$（this）.serialize（），
beforeSend:function（）{
$（'Loading…'）.insertBefore（'XXLoginFormXX'）.css（'position'，'absolute'）；
},
成功：函数（数据）{
//成功登录后，绘制页面。
var Page01XHTML；
var Page02XHTML；
var-Page03XHTML；
美元。什么时候(
$.get（'XXPathToEditProfilePageXX'，函数（数据1）{
var Page02XHTML=$（'div.content'，data1）；
}),
$.get（'XXPathToAccountOrderListPageXX'，函数（数据2）{
var Page03XHTML=$（'div.content'，data2）；
}),
$.get（'XXPathToWishListsPageXX'，函数（数据3）{
var Page01XHTML=$（'div.content'，data3）；
})
).然后（函数（Page02XHTML、Page03XHTML、Page01XHTML）{
$（'.loading'）.fadeOut（'slow'）；
$（'div.content'）.fadeOut（函数（）{
$（this）.attr（'id'，'MyAccount'）.html（''+Page01XHTML+Page03XHTML+Page02XHTML+''）.parents（'body'）.find（'.content'）.each（function（）{
dr_thisID=$（this.attr（'id'）；
如果（dr_thisID！=“MyAccount”）{
$（这个）。附加到（$（'div#MyAccount'）；
}
}).parents（'div#MyAccount'）.children（）.each（function（））{
dr_thisClass=$（this.attr（'class'）；
如果（dr_thisClass！=“内容”）{
$（this.remove（）；
}
});
}).fadeIn（）；
});
}
});
返回false；
});