Javascript-форум - Как получить часть страницы загруженной через ajax

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как получить часть страницы загруженной через ajax (https://javascript.ru/forum/jquery/16984-kak-poluchit-chast-stranicy-zagruzhennojj-cherez-ajax.html)

Как получить часть страницы загруженной через ajax

Подскажите можно ли как-то уменьшить количество обращений к серверу в таком коде:

$(document).ready(function(){

$("#id1").load('ajax/all.html #id1');
$("#id2").load('ajax/all.html #id2');
$("#id3").load('ajax/all.html #id3');
$("#id4").load('ajax/all.html #id4');

});

Такой код делает 4 обращения к серверу, это именно та часть которую хотелось бы оптимизировать. Выставление кэширующих заголовков у файла ajax/all.html не помогает. В лучшем случае я получаю 304 ответ на первый запрос, а надо бы сделать чтобы запрос был 1.

Нужно что-то типа такого:

var jqxhr = $.get("ajax/all.html", onAjaxSuccess);
function onAjaxSuccess(obj) {

$("#id1").html(obj #id1); // выводит блок с id1
$("#id2").html(obj #id2); // выводит блок с id2
$("#id3").html(obj #id3); // ...
$("#id4").html(obj #id4);

}

Вариант с html(obj #id1) не работает, приведен для примера. Можно как-то вытащить из obj нужный блок с заданным id?

Цитата:

Сообщение от Kostushko

Вариант с html(obj #id1) не работает, приведен для примера

Еще бы. Может стоит сперва прочитать справку по JavaScript и jQuery?

var jqxhr = $.get("ajax/all.html", function(data) {
  data = $(data);
  $("#id1").html($('#id1', data));
  $("#id2").html($('#id2', data));
  $("#id3").html($('#id3', data));
  $("#id4").html($('#id4', data));
});

B@rmaley.e><e, почему-то не работает, страница загружается
код:

$('#subs').html(data);

выводит всю загруженную страницу, а выборка по идентификаторам не срабатывает (ничего не выводится, дефолтный текст, прописанный в #id1 просто удаляется).

Хм, попробуйте

$.get("ajax/all.html", function(data) {
  data = $(data);
  $("#id1").html($('#id1', data).html());
  $("#id2").html($('#id2', data).html());
  $("#id3").html($('#id3', data).html());
  $("#id4").html($('#id4', data).html());
});

Если не поможет, значит на загружаемой странице нет таких элементов.

Все же не работает, но элементы такие на загружаемой странице есть. Посмотрите, пожалуйста, в чем может быть проблема?

Тестовая страница:

<div id="id1">загрузка</div>
<br />
<br />
<br />
<div id="id2">загрузка</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.get('all.html', function(data) {
	data = $(data);
		$("#id1").html($('#id11', data).html());
		$("#id2").html($('#id22', data).html());
	});
});
</script>

Страница которую грузит ajax:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>

<div id="id11">
123
</div>
<div id="id22">
321
</div>

</body>
</html>

Оба файла во вложении

Все заработало когда на исходной странице, добавил общий div (имя тега по всей видимости значения не имеет).

<div>
<div id="id11">
123
</div>
<div id="id22">
321
</div>
</div>

Можно проще

success: function(data){
var data = $(data);
alert(data.find('#id_b').html());
}

Вместо #id_b нужный элемент.

Codemasters, какая строчка стала проще?