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.
Вот как работает код примера:
- Страница содержит элемент
divс идентификаторомforecast, в котором будет размещаться разметка прогноза. - Обработчик события
clickдля кнопкиgetForecastформирует данные для отправки на сервер. - Затем обработчик выбирает
#forecastdivи вызывает метод jQueryload(), передавая URL (getForecast.html) и объект с данными. - jQuery выполняет AJAX запрос к файлу
getForecast.html. Когда браузер получает ответ , jQuery автоматически замещает содержание элемента#forecastполученной разметкой.
Одной из причин того, что метод load() легко использовать является то, что не нужно писать возвратную функцию для обработки ответа - jQuery все делает для вас. Но если вам требуется производить какие-нибудь действия после того, как разметка вставлена, вы можете передать "полноценную" возвратную функцию в качестве третьего аргумента методу load().
Загрузка части страницы
Иногда сервер может вернуть больше разметки, чем нужно. Например, вы запрашиваете статью с сервера, чтобы вставить текст на свою страницу, но весь документ вам не нужен.
Метод jQuery load() позволяет легко ограничивать объем полученной разметки. Нужно просто добавить пробел после запроса URL, за которым будет следовать селектор для выбора нужной части страницы. jQuery получит всю страницу через AJAX, но только нужная часть разметки будет вставлена в текущий код.
Например:
$('#articleContainer').load( "newArticle.html #articleBody" );
Так можно получать новые страницы с сервера. Не нужно будет перегружать каждый раз страницу. Также можно выводить сообщение о загрузке для посетителя, чтобы он был в курсе происходящего. Например, можно добавить сообщение"Загрузка, подождите!" в контейнер #articleContainer, затем вызвать метод load(), чтобы загрузить новое содержание в #articleContainer. Как только новая разметка будет получена , сообщение будет автоматически замещено.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/4TLpDy186rg/lessons.php
|
В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
- 2025-12-02 » ПромоСтраницы Яндекса: Что такое и для чего служит
- 2025-12-02 » Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам
- 2025-11-26 » Оценка эффективности контента: превращаем информационный балласт в рабочий актив
- 2025-11-26 » 10 причин высокого показателя отказов на сайте
- 2025-11-26 » Когда и зачем обновлять структуру сайта
- 2025-11-26 » Скрытые демотиваторы: как мелочи разрушают эффективность команды
- 2025-11-26 » Зачем запускать MVP и как сделать это грамотно?
- 2025-11-20 » Половина российских компаний сократит расходы на транспорт и маркетинг в 2026 году
- 2025-11-20 » Перенос сайта с большим количеством ссылок
- 2025-11-20 » Перелинковка сайта: Что такое и как ее использовать
- 2025-11-20 » Критерии выбора SEO-специалиста и подрядчика для продвижения сайта
- 2025-11-20 » Применение искусственного интеллекта в рекламных агентствах: комплексное исследование трендов 2025 года
- 2025-11-19 » Геозапросы по-новому: как покорить локальное SEO с помощью ИИ
- 2025-11-14 » Консалтинг: сущность и ключевые направления
- 2025-11-14 » Онлайн-формы: универсальный инструмент для сбора обратной связи
- 2025-11-14 » Факторы конверсии органического трафика
- 2025-11-14 » Планирование рекламного бюджета: самостоятельный подход
- 2025-11-14 » Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж
- 2025-11-13 » Эффективные методы стимулирования клиентов к оставлению положительных отзывов
- 2025-11-13 » Налоговая реформа — 2026: грядущие изменения для предпринимателей
- 2025-11-13 » Альтернативы мессенджерам: что выбрать вместо Telegram и WhatsApp
- 2025-11-13 » Маркировка рекламы для начинающих: полное руководство по требованиям ЕРИР
- 2025-11-13 » ИИ не отберет вашу работу — её займет специалист, владеющий искусственным интеллектом
- 2025-10-29 » Как оценить эффективность работы SEO-специалиста: практическое руководство для маркетологов и владельцев бизнеса
- 2025-10-29 » Киберспорт как маркетинговый инструмент: стратегии привлечения геймеров
- 2025-10-29 » Как говорить с аудиторией о сложном
- 2025-10-29 » Что такое доказательства с нулевым разглашением (ZKP) и их роль в блокчейне
Человек - аристократ среди животных Гейне Генрих - (1797-1856) - немецкий поэт и публицист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.