Вопрос по jquery, dom, ajax, parsing – Простой пример jQuery ajax не находит элементы в возвращенном HTML

11

Я пытаюсь изучить ajax-функции jQuery. У меня все работает, но jQuery не находит элементы в возвращенном HTML DOM. Запустите эту страницу в той же папке, что и jquery:

<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>runthis</title>

    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>

    <script tyle="text/javascript">
    $(document).ready(function(){
        $('input').click(function(){
            $.ajax({
                type : "GET",
                url : 'ajaxtest-load.html',
                dataType : "html",
                success: function(data) {

                alert( data ); // shows whole dom

                alert( $(data).find('#wrapper').html() ); // returns null

                },
                error : function() {
                    alert("Sorry, The requested property could not be found.");
                }
            });
        });
    });
    </script

</head>
<body>
    <input type="button" value="load" />
</body>
</html>
</code>

Который загружает эту страницу & quot; ajaxtest-load.html & quot ;:

<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>load this</title>

</head>
<body>
    <div id="wrapper">
    test
    </div>
</body>
</html>
</code>

Это дает два предупреждения. Один показывает, что DOM был загружен, а второй показывает NULL вместо #wrapper. Что я делаю неправильно?

РЕДАКТИРОВАТЬ: «Я загружаю» ajaxtest-load.html & quot; который включает в себя весь заголовок, включая JQuery снова. Это проблема?

Возможно, очистите верхний код и опубликуйте, как выглядит HTML на «ajaxtest-load.html». ScottE
Второй блок html - это ajaxtest-load.html. Отредактировал описание. Извини за это. user110218

Ваш Ответ

4   ответа
2

$('#testDiv').load('ajaxtest-load.html #wrapper', function(resp) {
    alert(resp);
});

От$ .load документация:

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector.

Спасибо, но запустив это, firebug показал ошибку «$. Load» это не функция. user110218
Вы не можете просто использовать $ .load. Вы должны использовать его на селекторе, таком как $ (селектор) .load ()
@ Т Б - да, не знаю, о чем я думал. @threebttn Извините, попробуйте использовать его, чтобы заполнить div. Смотрите мое редактирование.
Хм, не уверен, от каких действий здесь приходят оповещения (новичок в SO), поэтому я просто прокомментирую основной вопрос ... Я немного обновил свой пост ниже с помощью функции parseHTML, надеюсь, это поможет
Я изменил его, чтобы заполнить div, но все равно не повезло. Я думаю, что это потому, что это полноценный HTML DOM вместо HTML-фрагмента (также ответьте ниже). Может ли это быть проблема? Как мне разобрать полный HTML DOM? user110218
9

Параметр data функции обратного вызова может быть преобразован в объект $ (data) jQuery (1.6.2), который содержит различные части ответа HTML:

Stuff that precedes the actual document, such as a doctype declaration, or ignorable white space textnodes. The contents of the head element. The contents of the body element.

Элементы html, head и body отсутствуют в объекте данных. Поскольку количество элементов, содержащихся в заголовке и теле, может различаться, вы не должны получать их, индексируя как $ (data) [2]. Вместо этого примените фильтр к этому объекту, например так:

        $.get(
          uri,
          function(data, textStatus, jqXHR){
            var $doc = $(data);
            var title = $doc.filter('title').text();
            // title is the title from the head element.
            // Do whatever you need to do here.
          }
        );

После фильтрации правильных элементов вы можете применить дополнительные селекторы, используя find ().

К сожалению, в IE элементы head не являются частью $ (data). Я понятия не имею, почему это так.

Я часами пытался выяснить, почему он не может найти определенный элемент, но он нашел все элементы внутри. Переключение.find() в.filter() заставил это работать. Спасибо вам большое! Кроме того, я хочу ударить ребенка по лицу. Даже не шучу, вот как я злюсь.
+1, потому что это работает с последними.ajax() реализация также. Я только что изменился.find() в.filter() и все заработало!
7

.load().

Чтобы создать новый блок с извлеченным HTML в DOM, я делаю это:

$('<div></div>').appendTo('body').load('some-other-document.html div#contents');

Если он не работает для вас, убедитесь, что вы используете самую последнюю версию (или пост 1.2) jQuery. Увидетьдокументация для .load для большего количества примеров.

Редактировать:

Обратите внимание, что в приведенном выше примере результат будет:

<div><div id="contents">...</div></div>

Чтобы получить только содержимое элемента #contents в другом документе, используйте функцию обратного вызова в вызове функции загрузки.

$('<div></div>').load('some-other-document.html div#contents', null, 
    function (responseText, textStatus, XMLHttpRequest) {
        if (textStatus == success) {
            $('<div></div>').appendTo('body').html($(this).html());
        }
    }
);
Мне это нравится, потому что это позволяет избежать вставки возвращенных данных в документ сразу. К вашему сведению, если вы не возражаете против создания фиктивного div и вставки в него возвращенных данных, вы можете сделать это внутри$.get(), Это по существу то, что.load() делает под капотом.
спасибо, это идеальное решение, которое мне нужно для моего проекта. В моих вызовах ajax я получаю данные, запрошенные пользователем (либо всплывающую подсказку, содержимое страницы или что-то еще), и он всегда должен сопровождаться объектом json для обновления виджетов пользователя ... Разделение запрошенной информации и json-объект был выполнен, отправив 2 div, и ваша техника позволяет мне сделать .find (), чтобы вернуть необходимые данные. еще раз спасибо
3

html & gt; или & lt; body & gt; теги, но только несколько элементов HTML, этоdoes Работа.

Редактировать:

Если ввод должен быть полной HTML-страницей, возможно, вы можете сначала удалить теги, которые вам не нужны, с помощью строковых операций ... кто-нибудь?

Изменить 2:

Смутно запоминающийся Javascript / DOM допускал «временные документы» который вы могли бы оперировать и использовать результаты, а затем немного погуглив, дали функцию parseHTML (http://www.daniweb.com/forums/post874892-2.html) которые я адаптировал для возврата правильного бита:

$(document).ready(function(){
  $('input').click(function(){
    $.ajax({
      type : "POST",
      url : 'ajaxtest-load.html',
      dataType : "html",
      success: function(data) {
        alert( data ); // shows whole dom
        var gotcha = parseHTML(data, 'wrapper');
        if (gotcha) {
          alert($(gotcha).html());
        }else{
          alert('ID not found.');
        }
      },
      error : function() {
        alert("Sorry, The requested property could not be found.");
      }
    });
  });
});

function parseHTML(html, idStr) {
  var root = document.createElement("div");
  root.innerHTML = html;
  // Get all child nodes of root div
  var allChilds = root.childNodes;
  for (var i = 0; i < allChilds.length; i++) {
    if (allChilds[i].id && allChilds[i].id == idStr) {
      return allChilds[i];
    }
  }
  return false;
}

Это работает?

О, может быть, регулярное выражение, чтобы раздеть тело или что-то? А затем использовать jQuery, чтобы преобразовать это в объект, на котором я могу .find ()? user110218
Примерно так, да. Я предоставил пример, но мое регулярное выражение JS не так уж и фантастично, и я дважды опасаюсь приводить примеры регулярных выражений, когда я очень мало представляю, что может быть в содержании :-) (например, тело может иметь атрибуты, содержащие "& gt;", но желающие попробовать ..

Похожие вопросы