Загрузка фрагментов страницы с помощью $.post в jQuery

#php #jquery

#php #jquery

Вопрос:

Я извлекаю 2 div со страницы, используя AJAX-запрос $.post jQuery. Теперь данные, которые поступают после выполнения, получены из запроса POST и представляют собой что-то вроде этого…

 //data.php
<div id="alpha">alpha</div><div id="beta">beta</div>
  

Теперь, если я захочу загрузить данные только из div с идентификатором ‘alpha’ в div с идентификатором ‘container’ на текущей странице, и если данные поступят по запросу GET, моя жизнь будет проще…

 $("#container").load('data.php #alpha');
  

решило бы проблему.

Я хочу выполнить аналогичную фильтрацию для функции success, используя функцию $.post в jQuery, чтобы я мог загрузить соответствующий div на соответствующей странице текущей страницы. Как я могу этого добиться?

 $.post('data.php',null,function(data){
//what to do here?
});
  

Спасибо

Ответ №1:

 $.post('data.php',
       function(data){
    $("#container").html($(data).find('#alpha'));

});
  

предполагая, что вы заменяете весь контейнер целиком. если вы добавляете это тогда…

 $.post('data.php',
       function(data){
    $("#container").append($(data).find('#alpha'));

});
  

Комментарии:

1. Данные FatherStorm содержат 2 div, мне нужно их разделить.

2. FatherStorm приведенный выше код не работает. Я не думаю, что $ (data) — это правильно.

Ответ №2:

 $('#container').append($(data).find('#alpha'));
  

Ответ №3:

Если ответ в точности соответствует вашему описанию и не имеет корневого элемента.

 $.post("some url", {},
  function(data) {
    var $d = $("<div/>").append(data);
    $('body').append($d.find("#alpha"));
});
  

Пример на jsfiddle

Комментарии:

1. Работает как шарм, но можете ли вы объяснить, почему мы должны были сначала добавить данные в тег ‘<div />’?

2. @LoneWOLFs, причина в том, что их ответ обрабатывается как массив из двух объектов jQuery, $(data).length = 2 Добавление его в div позволяет вам правильно найти id из родительского объекта. Выдача find() from $(data) завершается ошибкой, поскольку у обоих элементов нет дочерних элементов. Чтобы заставить это работать без $("<div/>") , вы можете использовать .filter() like $(data).filter("#alpha"); , который уменьшит набор до правильно подобранного селектора.

3. Потрясающе, довольно хорошо развеял сомнения. Огромное спасибо за ответ.