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

В библиотеке jQuery есть очень простая и быстрая возможность это сделать. Допустим, вам необходимо взять данные из блока с id – page первой страницы и вставить их в блок с id – block на второй странице.

Html код будет примерно таким:

<div id="content"> 
<div id="block"></div>
</div>
</div>

JS код таким:

$("#block").load("exemple.html #page");

Если необходимо, обновить данные в блоке с текущей, просматриваемой страницы (с самой на себя) , а не получить данные с другой страницы, то используйте следующий код:

$("#block").load("/current.html #block > *");

Селектор со знаком больше ( >) указывает на дочерний элемент, а селектор со знаком звездочки (*) указывает на все элементы. Таким образом, идет указание на все дочерние элементы блока с id – block.

Это поможет избежать того случая, когда использование такого кода:

$("#block").load("/current.html #block");

Приведет к дублированию элемента с идентификатором:

<div id="content"> 
<div id="block">
<div id="block">
</div>
</div>
</div>
</div>

Данная статья рассчитана на начинающих программистов, для которых, возможно, она пригодится.