Этот урок связан с проектом AJAX с помощью jQuery: Руководство для начинающих

AJAX с помощью jQuery. Руководство для начинающих. Часть 2

В предыдущем уроке серии мы дали общее определение технологии 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 на сервере:

<h2>Прогноз погоды в Васюках</h2>
<h3>18 марта 2012</h3>
<p>Будет мерзко холодно, сыро и слякотно. Макисмальная температура: 1C.</p>

getForecast.html имитирует эффект выполнения скрипта на стороне сервера и возвращает разметку с прогнозом погоды.

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

<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
 
  $( function() {
 
    $('#getForecast').click( function() {
      var data = { city: "Васюки", date: "20120318" };
      $('#forecast').load( "getForecast.html", data );
    } );
 
  } );
 
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
<div id="forecast"></div>
 
</body>
</html>

Пробуем запустить демонстрацию и наслаждаемся результатом работы запроса AJAX.

Вот как работает код примера:

  1. Страница содержит элемент div с идентификатором forecast, в котором будет размещаться разметка прогноза.
  2. Обработчик события click для кнопки getForecast формирует данные для отправки на сервер.
  3. Затем обработчик выбирает #forecast div и вызывает метод jQuery load(), передавая URL  (getForecast.html) и объект с данными.
  4. jQuery выполняет AJAX  запрос к файлу getForecast.html. Когда браузер получает ответ , jQuery автоматически замещает содержание элемента #forecast полученной разметкой.

Одной из причин того, что метод load() легко использовать является то, что не нужно писать возвратную функцию для обработки ответа - jQuery все делает для вас. Но если вам требуется производить какие-нибудь действия после того, как разметка вставлена, вы можете передать "полноценную" возвратную функцию в качестве третьего аргумента  методу load().

 

Загрузка части страницы

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

Метод jQuery load() позволяет легко ограничивать объем полученной разметки. Нужно просто добавить пробел после запроса URL, за которым будет следовать селектор для выбора нужной части страницы. jQuery получит всю страницу через AJAX, но только нужная часть разметки будет вставлена в текущий код.

Например:

$('#articleContainer').load( "newArticle.html #articleBody" );

Так можно получать новые страницы с сервера. Не нужно будет перегружать каждый раз страницу. Также можно выводить сообщение о загрузке для посетителя, чтобы он был в курсе происходящего. Например, можно добавить сообщение"Загрузка, подождите!" в контейнер #articleContainer, затем вызвать метод load(), чтобы загрузить новое содержание в #articleContainer. Как только новая разметка будет получена , сообщение будет автоматически замещено.

sourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 6 Марта 2012
Просмотров: 58401
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Марта 2012 15:44
    artamonov
    Отлично! Большое спасибо автору!
  • 7 Марта 2012 15:54
    mixermf
    Отличные уроки!!Ждем продолжения с примерами!!!
  • 7 Марта 2012 17:42
    timondrik1991
    Очень хороший урок, в просторах поискового мусора такого не найдешь. Только вот вопрос автору! Этому всему будет продолжение или как с другими проектами, тупо напишешь две статьи и закинешь проект, так и не дав углублённого материала?
  • 7 Марта 2012 18:25
    artamonov
    Решил сразу добавить всякие удобности при заполнении формы и столкнулся с проблемой с кодировкой!
    • 16 Марта 2012 21:36
      Bugnet
      Часто при использовании Ajax возникают проблемы с кодировкой. Я для вёрстки использую CodeLobsterPHPeditor и заметил, что использование <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> недостаточно нужно менять кодировку в самой программе CodeLobsterPHPeditor Файл-изменить кодировку (UTF-8 или 1251 ). А на счёт ошибок - бросилось в глаза </head> </head> 2 раза
  • 7 Марта 2012 18:57
    jurii2
    super, наконец то ясно написали про ajax с использованием jQuery, буду использовать в разработках, есть книги, но теперь все стало на свои места
    • 22 Марта 2012 18:08
      tlustenko
      из того что здесь есть, пока нечего использовать....
  • 7 Марта 2012 20:13
    mccrush
    Отлично, как раз то что искал! Спасибо огромное!
  • 7 Марта 2012 20:17
    Максим Фишер
    ясно написали? люди, там ошибка на ошибке, как вы там что понимаете? перевод явно через promt или google
    • 8 Марта 2012 21:34
      vtvz_ru
      Нашел к чему придраться
  • 15 Марта 2012 00:51
    tarik2233
    Кто нашёл то, что нада тому ошибки не страшны
  • 1 Апреля 2012 15:38
    Alexey_
    Как и в первой части данного урока, у меня не работает этот пример скрипта в Опере и Хроме. Зато, как ни странно, всё отлично работает в ослике (горы воно).
  • 9 Августа 2012 17:25
    std_afx
    блин, беда с кодировкой, в 2х файлах прописал
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    • 4 Октября 2012 23:27
      sigrosigro
      .htaccess тебе в помощь...
  • 24 Ноября 2012 06:39
    pavvas
    У меня метод load не замещает, как Вы пишите, содержимое блока, а добавляет новое содержимое к старому, сдвигая старое вниз.
    • 17 Июня 2013 19:08
      misha1212
      А что вам мешает изменить код и сделать через append() или after()
  • 16 Сентября 2014 00:25
    Dark_AKC
    Здравствуйте. Написал свой движек, теперь хочу полностью его перевести на ajax. С навигацией по сайту решил проблему. Теперь проблема с формами, а точнее с PHP обработкой ошибок. Ошибки (если есть) записываются в сессию и с помощью header производится переход обратно к форме и в шапке вывод ошибок. Так вот. Меня смущает работа ajax и header(). Получается, кто быстрее отработает, тот и победил :) Как то можно исправить конфликт? В сторону плагинов не смотрю, хочу сам написать скрипт
  • 1 Марта 2015 21:22
    Elutic
    Привет! У меня почему-то не срабатывает
    $.post( "getForecast.txt", data, success, "json" );
    
    Консоль пишет:
    POST getForecast.txt 405 (Method Not Allowed)
    Подскажите, в чем может быть проблема? При этом get прекрасно работает!
  • 14 Марта 2015 03:30
    Karabass
    Евгений, подскажите как сделать форму поиска с выпадающим меню, как http://hh.ru/ чтобы можно было, в выпада.щем списке, выбирать раздел где искать
^ Наверх ^