1

我在这样的页面上有两个 div：

<div id="content_1"></div>
<div id="content_2"></div>

这两个 div 的内容是通过 Ajax 更新的，方法如下：

$('#content_1').load('content_1_url', function(){
    $.ajax({
        type: 'GET',
        url: 'content_2_url', 
        success: function(data) {
            $('#content_2').html(data);
        }
    });
});

上面可以看到， 的内容content_1来自对 url 的 ajax 调用返回的结果，content_1_url的内容content_2来自对 url 的 ajax 调用的返回结果content_2_url。这很好用，但我遇到的问题是每个 div 的内容没有在页面上同时更新。第一个 div 内容首先显示，然后一秒钟后出现第二个 div 的内容。我希望它们同时出现。知道如何解决这个问题吗？

谢谢

4

3 回答 3

0

Try something like this:

$.when($.ajax("content_1_url"), $.ajax("content_1_url"))
  .then(myFunc, myFailure);

function myFunc(){
//This execute after both ajax calls finish ok
}

function myFailure(){
//This execute after either ajax calls fails
}

I edited this is the complete code (from jquery oficial documentation http://api.jquery.com/jQuery.when/) just change page1.php and page2.php to yours urls:

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1, a2){
  /* a1 and a2 are arguments resolved for the
      page1 and page2 ajax requests, respectively. 
      each argument is an array with the following 
      structure: [ data, statusText, jqXHR ] */
  var data = a1[0] + a2[0]; /* a1[0] = "Whip", a2[0] = " It" */
  if ( /Whip It/.test(data) ) {
    alert("We got what we came for!");
  }
});
于 2013-07-02T16:50:00.040 回答
0

那个怎么样：

var ajax1 =  $.ajax({
     type: 'GET',
     url: 'content_1_url'
 }), ajax2 = $.ajax({
     type: 'GET',
     url: 'content_2_url'
 });

$.when(ajax1,ajax2).done(function(data1,data2){
    $('#content1').html(data1[0]); 
    $('#content2').html(data2[0]);
});
于 2013-07-02T16:34:14.510 回答
0

像这样的东西？

var res1, res2;
$.ajax({type: 'GET', url: 'content_1_url', success: function(data){res1 = data;}, async: false});
$.ajax({type: 'GET', url: 'content_2_url', success: function(data){res2 = data;}, async: false});
$('#content1').html(res1);
$('#content2').html(res2);
于 2013-07-02T16:35:21.147 回答