Простой пример jQuery ajax не находит элементы в возвращенном HTML - PullRequest
Новая
       13

Простой пример jQuery ajax не находит элементы в возвращенном HTML

11 голосов
/ 23 июня 2009

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

<!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>

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

<!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>

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

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

Ответы [ 4 ]

9 голосов
/ 07 марта 2012

Это не прямой ответ, но может помочь прояснить ситуацию.

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

  • Материал, предшествующий фактическому документу, например объявление типа документа или игнорируемые текстовые узлы пробелов.
  • Содержимое элемента head.
  • Содержимое элемента body.

Элементы 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). Я понятия не имею, почему это так.

7 голосов
/ 23 июня 2009

Мне удалось отлично загрузить фрагменты полных html-документов с помощью .load().

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

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

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

Edit:

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

<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());
        }
    }
);
3 голосов
/ 23 июня 2009

Я обнаружил, что если ajaxtest-load.html не имеет тегов или , а содержит всего несколько HTML-элементов, он работает .

Edit:

Если ввод должен быть полной 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;
}

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

2 голосов
/ 23 июня 2009

Почему бы не попробовать это и посмотреть, что произойдет: 

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

Из $. Загрузочной документации :

В jQuery 1.2 теперь вы можете указать Селектор jQuery в URL. Делать это будет фильтровать входящий HTML документ, только вставка элементов которые соответствуют селектору.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...