Возможно, вы читали наше руководство по jQuery , а также в пятой части нашего учебника по об AJAX по , но сегодня я покажу вам, как использовать AJAX для динамической отправки веб-формы. JQuery — безусловно, самый простой способ использовать AJAX, поэтому ознакомьтесь с нашим руководством по пособие по если вы новичок. Давайте прыгнем прямо в.
Зачем использовать AJAX
Вы можете спросить: «Зачем мне нужен AJAX?». HTML прекрасно подходит для отправки форм и делает это довольно безболезненно. AJAX реализован в большинстве веб-страниц, и его популярность продолжает расти.
Огромное преимущество AJAX — возможность частичной загрузки частей веб-страниц. Это делает страницы более быстрыми и отзывчивыми, а также экономит полосу пропускания, загружая лишь небольшую часть данных вместо всей страницы. Вот несколько основных примеров использования AJAX:
- Регулярно проверяйте наличие новых писем.
- Обновляйте счет в футболе каждые 30 секунд.
- Обновите цену для онлайн-аукциона.
AJAX предоставляет вам, разработчику, практически неограниченную возможность делать веб-страницы быстрыми, отзывчивыми и быстрыми — за что ваши посетители будут вам благодарны.
HTML
Прежде чем начать, вам нужна форма HTML. Если вы не знаете, что такое HTML, прочитайте наше руководство о том, как сделать сайт для начинающих
Вот HTML-код, который вам нужен:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> </script> </head> <body> <form action="some/file" method="POST" name="myForm" id="myForm"> Name: <input type="text" name="name"> Age: <input type="text" name="age"> <input type="submit"> </form> </body> </html> 
Этот HTML определяет форму с несколькими элементами. Обратите внимание на наличие атрибутов action и method . Они определяют, где и как форма отправляется. Они не нужны, когда вы используете AJAX, но это хорошая идея, поскольку они гарантируют, что посетители вашего сайта все еще могут использовать его, если у них отключен JavaScript. На этой странице размещен jQuery, размещенный Google на их CDN. . Заголовок содержит тег script — здесь вы будете писать свой код.
Эта форма может выглядеть немного скучно прямо сейчас, поэтому вы можете рассмотреть изучение CSS чтобы оживить ее.
JavaScript
Существует несколько способов отправки форм с помощью JavaScript. Первый и самый простой способ сделать это — через метод submit :
document.getElementById('myForm').submit();
Конечно, вы можете настроить таргетинг на форму с помощью jQuery — это не имеет значения:
$('#myForm').submit();
Эта команда говорит вашему браузеру отправить форму, точно так же, как нажатие кнопки отправки. Он нацелен на форму по ее идентификатору, и в данном случае это myForm . Это не AJAX, поэтому он перезагрузит всю страницу — что не всегда желательно.
В атрибуте метода вашей формы вы указали, как отправить форму. Это может быть POST или GET . Этот атрибут не используется при отправке форм с использованием AJAX, но можно использовать тот же метод.
Большая часть современной сети запускается из запросов GET или POST. Вообще говоря, GET используется для извлечения данных, в то время как POST используется для отправки данных (и возврата ответа). Данные можно отправлять с помощью GET, но POST почти всегда является лучшим выбором, особенно для данных форм. Возможно, вы уже видели запросы GET — они отправляют данные, прикрепленные к URL:
somewebsite.com/index.html?name=Joe
Знак вопроса говорит браузеру, что любые данные, следующие непосредственно за ним, не должны использоваться для обхода веб-сайта, а должны быть переданы на страницу для обработки. Это хорошо работает для простых вещей, таких как номер страницы, но имеет некоторые недостатки:
Максимальное количество символов: в URL может быть отправлено максимальное количество символов. Возможно, вам не хватит, если вы пытаетесь отправить большой объем данных.
Видимость. Любой может видеть данные, отправляемые в GET-запросе — это бесполезно для конфиденциальных данных, таких как пароли или данные форм.
POST-запросы работают аналогичным образом, только они не отправляют данные в URL. Это означает, что может быть отправлено большее количество данных (данные известны как полезная нагрузка ), и некоторая безопасность достигается за счет отсутствия доступа к данным. К данным по-прежнему можно легко получить доступ, поэтому посмотрите на SSL-сертификат. если вы хотите полного покоя.
Используется ли POST или GET, данные отправляются в парах ключ -> значение . В приведенном выше URL ключом является имя , а значением — Джо .
Лучший способ отправки форм — использовать асинхронный JavaScript и XML (AJAX). JavaScript поддерживает вызовы AJAX, но их использование может привести к путанице. JQuery реализует эти точно такие же методы, но делает это простым в использовании способом. Вы можете указать браузеру выполнить запрос GET или POST — для этого примера используйте POST, но запросы GET выполняются аналогичным образом.
Вот синтаксис:
$.post('some/url', $('#myForm').serialize());
Этот код делает несколько вещей. Первая часть ( $ ) сообщает вашему браузеру, что вы хотите использовать jQuery для этой задачи. Вторая часть вызывает метод post из jQuery. Вы должны передать два параметра; Первый — это URL для отправки данных, а второй — данные. Вы можете обнаружить (в зависимости от URL-адреса, к которому вы пытаетесь получить доступ), что политика безопасности того же источника вашего браузера может помешать здесь. Вы можете включить общий доступ к ресурсам между источниками, чтобы обойти это, но достаточно просто указать URL-адрес, размещенный в том же домене, что и ваша страница.
Второй параметр вызывает метод сериализации jQuery в вашей форме. Этот метод получает доступ ко всем данным из вашей формы и подготавливает их к передаче — он сериализует их.
Одного этого кода достаточно, чтобы отправить форму, но вам может показаться странным. Стоит изучить ваши инструменты для разработчиков браузеров, так как они упрощают отладку сетевых запросов.
Кроме того, Postman — отличный бесплатный инструмент для тестирования HTTP-запросов.
Если вы хотите отправить свою форму, используя AJAX, когда нажата кнопка отправки, это так же просто. Вам необходимо прикрепить свой код к событию отправки формы. Вот код:
$(document).on('submit','#myForm',function(){ $.post('some/url', $('#myForm').serialize()); return false; });
Этот код делает несколько вещей. Когда ваша форма отправлена, ваш браузер приходит и запускает ваш код первым. Затем ваш код отправляет данные формы, используя AJAX. Последний шаг, который необходимо предпринять, — запретить отправку исходной формы — вы уже сделали это с AJAX, поэтому вы не хотите, чтобы это повторилось!
Если вы хотите выполнить какую-то другую задачу после завершения AJAX (или, возможно, даже вернуть сообщение о состоянии), вам необходимо использовать обратный вызов . JQuery делает их очень простыми в использовании — просто передайте функцию в качестве другого параметра, подобного этому:
$.post('url', $('#myForm').serialize(), function(result) { console.log(result); }
Аргумент result содержит любые данные, возвращаемые URL-адресом, на который были отправлены данные. Вы можете легко ответить на эти данные:
if(result == 'success') { // do some task } else { // do some other task }
Вот именно для этого поста. Надеюсь, теперь у вас есть четкое представление о HTTP-запросах и о том, как AJAX работает в контексте формы.
Вы узнали какие-нибудь новые трюки сегодня? Как вы используете AJAX с формами? Дайте нам знать ваши мысли в комментариях ниже!
Кредиты изображений: vectorfusionart / Shutterstock