Как я могу получить элементы DOM из HTML, используя jjuery метод ajax?

Question

Я столкнулся с уникальной проблемой. Я делаю простой вызов ajax с использованием jQuery, чтобы получить содержимое HTML-файла.

$.ajax({
  url: "foo.html",
  dataType: "html",
  success: function(data){
    console.log(data);
  }
});

foo.html - это простой html-файл с основным div, называемым #mainContainer. Все, что я хочу сделать, это получить все содержимое из mainContainer и сохранить его в var, чтобы я мог добавить его в другой div где-нибудь на моей странице.

Вот index.html (файл, который выполняет вызов).

Вот foo.html (файл, который я пытаюсь вызвать и проанализировать).

Answer 1

API jQuery ".load ()" делает именно то, что вы просите:

$('#the_target_div').load("foo.html #mainContent", function() {
  // stuff to do when content is ready
});

Вы просто добавляете строку селектора после URL, разделенную пробелом.

Стоит отметить: если на загруженной странице есть какой-либо важный JavaScript (в тегах <script>), то при загрузке страницы таким образом сценарии не будут запускаться. Если вам нужно такое поведение, то вы должны либо извлечь контент самостоятельно (что является незначительным беспорядком), либо ваш сервер выполнит работу и ответит только фрагментом, который вам нужен.

Совершенно другим подходом было бы загрузить вашу страницу в скрытую <iframe> и затем погрузиться в эту DOM, чтобы найти то, что вы хотите. Затем его можно скопировать на главную страницу.

Answer 2

var mainContainerInnerHtml = $ (data) .find ("# mainContainer) .html ();

Answer 3

вам не нужно получать элементы dom.Вы можете использовать функцию replaceWith запроса для замены.

, вот так:

$("#data").replaceWith($("#data",ajaxReturnHtml)).serialize();

мне это подходит.