Как использовать AJAX для отправки веб-формы
Программирование

Как использовать AJAX для отправки веб-формы

JQuery – это, безусловно, самый простой способ использования AJAX. В этом посте вы узнаете, как использовать AJAX для динамической отправки веб-формы

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

Зачем использовать AJAX

Возможно, вы задаетесь вопросом: ‘Зачем мне нужен AJAX?’. HTML прекрасно справляется с отправкой форм, причем делает это довольно безболезненно.AJAX реализован в подавляющем большинстве веб-страниц, и его популярность продолжает расти

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

  • Регулярно проверяйте наличие новых сообщений электронной почты.
  • Обновление футбольного счета каждые 30 секунд.
  • Обновление цены для интернет-аукциона.
  • AJAX предоставляет вам, разработчику, практически неограниченные возможности для того, чтобы сделать веб-страницы быстрыми, отзывчивыми и проворными – то, за что ваши посетители будут вам благодарны

    HTML

    Прежде чем приступить к работе, вам понадобится HTML-форма. Если вы не знаете, что такое HTML, то прочитайте наше руководство о том, как сделать сайт для начинающих

    Вот HTML, который вам нужен:

    <!DOCTYPEhtml>
    <html>
    <head>
    <scriptsrc'https://ajax.googleapis.com/ajax/libs/jquery/3. 1. 1/jquery.min.js'type'text/javascript'></script>
    <scripttype'text/javascript'>

    </script>
    </head>
    <body>

    <formaction'some/file'method'POST'name'myForm'id'myForm'>
    Name:
    <inputtype'text'name'name'>
    Age:
    <inputtype'text'name'age'>
    <inputtype'submit'>
    </form>

    </body>
    </html>

    Этот html определяет форму с несколькими элементами. Обратите внимание на атрибуты action и method. Они определяют, куда и как отправляется форма. Они не нужны, когда вы используете AJAX, но это хорошая идея использовать их, так как это гарантирует, что посетители вашего сайта смогут пользоваться им, если у них отключен JavaScript. Эта страница включает jQuery, размещенный Google на их CDN. В head содержится тег script – именно здесь вы будете писать свой код

    Сейчас эта форма может выглядеть немного скучно, поэтому вам стоит изучить CSS, чтобы немного оживить ее

    JavaScript

    Существует несколько способов отправки форм с помощью JavaScript. Первый и самый простой способ – это метод submit :

    document.getElementById('myForm').submit();

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

    $('#myForm').submit();

    Эта команда указывает браузеру на отправку формы, точно так же, как нажатие кнопки submit. Он нацеливается на форму по ее id, а в данном случае это myForm. Это не AJAX, поэтому будет перезагружена вся страница – что не всегда желательно

    В атрибуте method вашей формы вы указали способ отправки формы. Это может быть 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, к которому вы пытаетесь получить доступ), что политика безопасности same-origin вашего браузера может вмешаться здесь. Вы можете включить кросс-оригинальный обмен ресурсами, чтобы обойти это, но часто достаточно просто указать на URL, размещенный на том же домене, что и ваша страница

    Второй параметр вызывает метод jQuery serialize на вашей форме. Этот метод получает доступ ко всем данным из вашей формы и готовит их к передаче – сериализует их

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

    В качестве альтернативы Postman – отличный бесплатный инструмент для тестирования HTTP-запросов

    Если вы хотите отправить форму с помощью AJAX при нажатии кнопки отправки, это так же просто. Вам нужно прикрепить свой код к событию submit формы. Вот код:

    $(document).on('submit''#myForm'function
    $.post('some/url', $('#myForm').serialize());
    returnfalse
    });

    Этот код выполняет несколько действий. Когда ваша форма отправляется, ваш браузер приходит и сначала запускает ваш код. Затем ваш код отправляет данные формы с помощью AJAX. Последний необходимый шаг – предотвратить отправку исходной формы – вы уже сделали это с помощью AJAX, поэтому вы не хотите, чтобы это произошло снова!

    Если вы хотите выполнить какую-то другую задачу после завершения AJAX (или даже вернуть сообщение о состоянии), вам нужно использовать обратный вызов.JQuery делает их очень простыми в использовании – просто передайте функцию в качестве другого параметра, как это сделано здесь:

    $.post('url', $('#myForm').serialize(),functionresult
    console.log(result);

    Аргумент result содержит любые данные, возвращенные url, на который были отправлены данные. Вы можете легко ответить на эти данные:

    if(result =='success') {
    // do some task

    else
    // do some other task

    Вот и все для этого поста. Надеюсь, теперь у вас есть твердое понимание HTTP-запросов и того, как AJAX работает в контексте формы

    Узнали ли вы сегодня какие-нибудь новые трюки? Как вы используете AJAX в формах? Сообщите нам о своих мыслях в комментариях ниже!

    Кредиты изображений: vectorfusionart/Shutterstock

    Об авторе

    Алексей Белоусов

    Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

    Комментировать

    Оставить комментарий