Добавить в избранное

Обработка AJAX с помощью jQuery (часть 2)

Дата: 2012-03-26

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как. Делаем запрос POST с помощью метода $.post() В то время как метод $.get() позволяет делать запросы AJAX с помощью метода HTTP GET, метод $.post() реализует запросы с помощью метода HTTP POST. Синтаксис вызова аналогичен методу $.get(). Например, изменим нашу демонстрацию с передачей прогноза погоды из предыдущего урока на использование метода $.post():

 
$.post( "getForecast.txt", data, success, "json" );

Пробуем запустить демонстрацию и получаем такое же окно, как и в предыдущем уроке. Метод HTTP POST обычно используется для отправки данных формы. Причина заключается в том, что метод GET позволяет отправлять небольшие объемы данных (обычно несколько сот символов), а метод POST может пересылать столько данных, сколько вам нужно. Поэтому, если требуется переслать большой объем данных в запросе AJAX, используйте метод $.post(). Загрузка разметки на страницу с помощью метода load() Очень удобный метод jQuery load() позволяет легко получать разметку HTML с сервера через AJAX и вставлять ее автоматически в текущую страницу. Если скрипт серверной стороны выполняет всю работу по обработке данных и формированию разметки, и вы хотите только вывести результат на странице, то вам нужно использовать метод load(). В простейшем случае вы можете вызвать метод load() следующим образом:

 
$('#myElement').load( url );

Данный пример делает запрос AJAX по адресу url, получает разметку с сервера и замещает ею содержание элемента #myElement. Также можно передать данные в запросе, также как и в методах $.get() и $.post():

 
var data = { city: "Васюки", date: "20120318" };
$('#myElement').load( url, data );

Модифицируем наш пример с прогнозом погоды так, чтобы сервер создавал разметку для передаваемых данных. Затем вызовем метод load() для отображения полученной разметки на странице. Сначала сохраним следующую разметку в файле getForecast.html на сервере:

 

Прогноз погоды в Васюках

18 марта 2012

Будет мерзко холодно, сыро и слякотно. Макисмальная температура: 1C.

getForecast.html имитирует эффект выполнения скрипта на стороне сервера и возвращает разметку с прогнозом погоды. Теперь сохраняем следующий код в файле showForecast.html в той же папке, что и getForecast.html: Прогноз погоды

Пробуем запустить демонстрацию и наслаждаемся результатом работы запроса AJAX. Вот как работает код примера: Страница содержит элемент div с идентификатором forecast, в котором будет размещаться разметка прогноза. Обработчик события click для кнопки getForecast формирует данные для отправки на сервер. Затем обработчик выбирает #forecast div и вызывает метод jQuery load(), передавая URL (getForecast.html) и объект с данными. jQuery выполняет AJAX запрос к файлу getForecast.html. Когда браузер получает ответ , jQuery автоматически замещает содержание элемента #forecast полученной разметкой. Одной из причин того, что метод load() легко использовать является то, что не нужно писать возвратную функцию для обработки ответа - jQuery все делает для вас. Но если вам требуется производить какие-нибудь действия после того, как разметка вставлена, вы можете передать "полноценную" возвратную функцию в качестве третьего аргумента методу load(). Загрузка части страницы Иногда сервер может вернуть больше разметки, чем нужно. Например, вы запрашиваете статью с сервера, чтобы вставить текст на свою страницу, но весь документ вам не нужен. Метод jQuery load() позволяет легко ограничивать объем полученной разметки. Нужно просто добавить пробел после запроса URL, за которым будет следовать селектор для выбора нужной части страницы. jQuery получить всю страницу через AJAX, но только нужная часть разметки будет вставлена в текущий код. Например: 1 $('#articleContainer').load( "newArticle.html #articleBody" ); Так можно получать новые страницы с сервера. Не нужно будет перегружать каждый раз страницу. Также можно выводить сообщение о загрузке для посетителя, чтобы он был в курсе происходящего. Например, можно добавить сообщение"Загрузка, подождите!" в контейнер #articleContainer, затем вызвать метод load(), чтобы загрузить новое содержание в #articleContainer. Как только новая разметка будет получена , сообщение будет автоматически замещено.

Просмотров: 3124

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


Размножения полей формы на сайте

Здравствуйте! уважаемые читатели Бывают ситуации когда нужно добавить на сайте несколько данных по одному критерию, можно несколько раз добавлять данные но это не проффесионально поэтому я предлогаю материал по добавлению полей при помощи jQuery.


Автосохранение данных, введенных в поля формы

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.


10 вставок кода jQuery

jQuery вдохнул новую жизнь в JavaScript. В данном уроке приводится 10 вставок кода jQuery, которые облегчат решение повседневных задач, возникающих при создании веб приложений.


Видео уроки по php,jquery,ajax,css,html,сео