Ajax负载-多个容器

Question

I am reading about jquery load method. I do not know if there is a way to load two different parts of the response in two different containers, using just a single ajax call, something like:

$( "#b" ).load( "article.html #targetInB" );
$( "#a" ).load( "article.html #targetInA" );

but using a single ajax call.

Thanks in advance.

Answer 1

I don't think it's built-in. However, you can load the entire contents into a hidden element temporarily, then move it from there to the target elements. This will reduce the number of AJAX calls to 1:

$('#temp').load("article.html", function() {
  $('#a').append($('#temp #targetInA'));
  $('#b').append($('#temp #targetInB'));
});

Here I am using the optional callback ability of .load to do post-processing after the result is returned from the AJAX call. The #temp div gets the entire contents from the AJAX. Then each individual piece is appended to the respective div.

Demonstration: http://jsfiddle.net/j4DKC/