Главная > Ajax > Загрузка содержимого контейнера посредством Ajax

Загрузка содержимого контейнера посредством Ajax


3 июля 2011, 12:30. Разместил: Mysterious Master
С помощью jQuery, вы можете подгружать не только содержимое конкретной ссылки, но и отдельные селекторы CSS из определенного документа, расположенного по URL-адресу. Например, так:

$("#area").load("something.html #content");

Этот код определяет содержимое в файле something.html, которое находится в элементе, которому присвоен ID содержимого, а затем он отображает его на нужной вам странице, внутри элемента, которому задан ID области.

Но давайте допустим, что файл something.html очень схож с текущей страницей. Вашей задачей является – заменить #area на #area из документа something.html. Итак, вам нужно сделать следующее:

$("#area").load("something.html #area");

Но это будет несколько проблематично, так как концовка будет выглядеть примерно так:

<div id="area">
    <div id="area">
         <!-- stuff -->
    </div>
</div>

И что бы сюда ни вызывало это действие, если вы повторите запрос еще раз, то это приведёт к ещё больше путанице (а это нам не нужно).

Простое решение заключается в том, чтобы просто захватить все содержимое #area, нежели сам элемент #area.

$("#area").load("something.html #area > *");

Давайте посмотрим самое простое демо:

Посмотреть демо

Это будет полезным вам, когда:

* Вы хотите выстроить функционал Ajax для модернизации веб-сайта. Чтобы каждый URL представлял собой не просто фрагмент информации, а был целой страницей, которая содержится сама по себе.
* Вам не хочется менять разметку типа
<div id="inside"></div>
для того, чтобы обойти эту проблему стороной.
Вернуться назад