jQuery load() Demo

В этих примерах выше, если текущий документ не содержит элемента с ID равным "result," то метод .load() не выполнится.

Метод запроса

Метод POST будет исползован если в метод .load() передан объект, иначе будет использован GET.

Загрузка фрагмента страницы

Метод .load() , в отличие от $.get() , позволяет указать часть удаленного документа для вставки. Это доступно при помощи специального синтаксиса в параметре url . Если один или несколько символов пробела включены в строку, то первое слово, после первого пробела, будет предполагать jQuery селектор, который определит какая часть будет вставлена.

Мы можем изменить код из примера выше, так чтобы использовалась только часть полученного документа:

$( "#result" ).load( "ajax/test.html #container" );

Когда этот методы выполняется, извлекается содержимое ajax/test.html , но затем jQuery разбирает полученный документ и ищет элемент с ID равным container . Этот элемент, со всем своим содержимым, будет вставлен в элемент с ID равным result и остальная часть загруженного документа будет проигнорирована.

jQuery используется свойство браузера .innerHTML , чтобы проанализировать полученный документ и вставить его в текущий документ. Во время этого процесс, браузре часто отфильтровывает такие элементы из документа как: , или . В результате, элемент полученный при помощи метода .load() может быть не таким же, как если получить этот документ в браузере напрямую.

Выполнения скриптов

Когда вызван .load() при помощи URL без выражения селектора, содержание передается в .html() до удаления скриптов. Это выполняется блоки скриптов, до их удаления. Если .load() вызван с выражением селектора в URL, то скрипты скрипты будут удалены до обновления DOM и поэтому не будут выполнены. Пример для обоих случае приведен ниже:

Здесь, любой JavaScript загруженный в #a как часть документа будет успешно выполнен.

В следующем случае, блоки скрипта перед вставкой в #b будут удалены и не будут выполнены:

$( "#b" ).load( "article.html #target" );

Дополнительные примечания:

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

Источник

jQuery Ajax Load

In this tutorial you will learn how to load data from server using jQuery.

jQuery load() Method

The jQuery load() method loads data from the server and place the returned HTML into the selected element. This method provides a simple way to load data asynchronous from a web server. The basic syntax of this method can be given with:

The parameters of the load() method has the following meaning:

• The required URL parameter specifies the URL of the file you want to load.
• The optional data parameter specifies a set of query string (i.e. key/value pairs) that is sent to the web server along with the request.
• The optional complete parameter is basically a callback function that is executed when the request completes. The callback is fired once for each selected element.

Let's put this method into real use. Create a blank HTML file "test-content.html" and save it somewhere in your web server. Now place the following HTML code inside of this file:

Example

Simple Ajax Demo
 
This is a simple example of Ajax loading.
 

Now, create one more HTML file say "load-demo.html", and save it at the same location where you've saved the previous file. Now put the following HTML code inside of it:

Example

         
Click button to load new content inside DIV box
 
 Load Content  

Finally, open this page in your browser and click the "Load Content" button. You'll see the content of DIV box is replaced by the HTML content of the "test-content.html" file.

Tip: To test this Ajax example you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the demo file using "http://" since Ajax makes HTTP requests.

Note: Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.

Further, the callback function can have three different parameters: responseTxt which contains the resulting content if the call succeeds, statusTxt wchich contains the status of the call, and the jqXHR whcich contains the XMLHttpRequest object.

Further, the callback function can have three different parameters:

• responseTxt — Contains the resulting content if the request succeeds.
• statusTxt — Contains the status of the request such as success or error.
• jqXHR — Contains the XMLHttpRequest object.

Here's the modified version of the previous example that will display either the success or error message to the user depending on the status of the request.

Example

         
Click button to load new content inside DIV box
 
 Load Content  

Loading Page Fragments

The jQuery load() also allows us to fetch only a portion of the document. This is simply achieved by appending the url parameter with a space followed by a jQuery selector, let's check out the following example to make it more clear.

Example

         
Click button to load new content inside DIV box
 
 Load Content  

The jQuery selector #hint within the url parameter (line no-10), specify the portion of the "test-content.html" file to be inserted inside the DIV box, which is an element that has the ID attribute with a value hint i.e. id="hint" , see the first example.

Источник

Динамическая загрузка контента через jQuery

В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Для примера я сначала построил очень простой макет. Вот скриншот и HTML-код, который мы будем использовать.

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «Fullstack-разработчик на JavaScript»

— Научитесь программировать на JavaScript и TypeScript.

— Cможете самостоятельно создавать сайты и веб-приложения.

— Освоите передовые технологии — React, Node.js, Docker, Express.js, Nest.js, Firebase, MongoDB.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Backend-разработка на Node.js

— Node.js позволит вам разрабатывать backend для веб-приложений самостоятельно.

— Изучив Node.js, frontend-разработчики становятся fullstack-разработчиками.

— 40 часов теории, 184 часа практики.

— 120 000 рублей средняя зарплата Node.js-разработчика.

— Помощь с поиском работы или стажировки.

ajax . nettuts

Welcome!

Шаг 1

Вначале пойдите и скачайте последний стабильный релиз jQuery и добавьте ссылку на него в ваш документ:

Как я считаю, одна из лучших черт jQuery – это его простота. Можно достичь поставленной задачи в сочетании с ошеломляющими эффектами всего несколькими строчками кода.

Во-первых, давайте загрузим библиотеку jQuery и запустим функцию, когда документ уже готов (когда DOM уже загружен).

Шаг 2

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

Для этого нам нужно определить ссылки в меню навигации и запускать эту функцию при щелчке на них:

Давайте наметим, что мы должны сделать в этой функции по порядку.

Удалить содержимое текущей страницы.

Получить новое содержимое страницы и добавить в содержимое DIV.

Вначале нам нужно определить, из какой страницы получать данные после того, как на ссылку нажали. Все, что для этого нужно сделать – это получить атрибут ‘href’ нажатой ссылки и использовать его как адрес страницы, из которой будет загружаться информация.
Кроме того, к полученному URL необходимо добавить метку элемента, так как мы не собираемся использовать ВСЕ содержимое из запрашиваемой страницы. Вместо этого, нам требуются данные внутри разделителя div с меткой ‘content’:

Чтобы наглядно продемонстрировать, что делает вышеуказанный код, давайте представим, что пользователь нажимает на ссылку ‘about’ , которая связана со страницей ‘about.html’ – в этой ситуации переменной будет: ‘about.html #content’ – и это именно та переменная, которую мы будем запрашивать при простом вызове. Однако первое, с чего мы начнем – это создадим красивый эффект для содержимого текущей страницы. Вместо того, чтобы оно просто исчезало, мы используем функцию «скрывания» jQuery:

Указанная функция быстро «прячет» #content div, и как только эффект заканчивает свое действие, она, в свою очередь, инициирует функцию «loadContent» (загрузка нового содержимого [через ajax]) – это функция, которую мы определим позже (в шаге 4).

Шаг 3

Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:

Вот CSS, прилагающаяся к свежесозданному #load div:

Таким образом область, которая должна содержать анимацию загрузки, первоначально не отображается. Далее, при инициализации функции fadeIn () (см. выше в коде), она начинает отображаться в верхнем правом углу сайта и показывает анимированный GIF, пока через некоторое время снова не исчезнет с экрана.

Шаг 4

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

Текущее содержание эффектно исчезает.

Появляется сообщение о загрузке.

А теперь давайте напишем ту самую функцию загрузки содержимого, о которой мы ранее говорили:

Функция loadContent вызывает запрошенную страницу, а когда это уже выполнено, вызывает функцию ‘showNewContent’ (показ нового содержимого):

Эта функция – showNewContent — использует функцию show() jQuery (на самом деле, это слишком скучное название для такого отличного эффекта) с тем, чтобы новое содержимое, помеченное меткой элемента ‘#content’ появилось на странице. Однажды вызванная, она инициирует функцию ‘hideLoader’ (исчезание):

Нам необходимо помнить, что функция обработки клика должна возвратить «false», чтобы браузер не совершил перехода на другую страницу.

Теперь все должно работать прекрасно. Пример этого можно увидеть здесь: [LINK]

Шаг 5

Можно было бы на этом и остановиться, но если вы беспокоитесь об удобстве использования (о котором должны заботиться), важно проделать еще кое-какую работу. Проблема нашего текущего решения в том, что оно игнорирует адреса URL. Что, если пользователь захочет определить ссылку на одну из наших так называемых «страниц»? Сейчас это сделать невозможно, потому что URL все время один и тот же.

Источник