jQuery. Передать все поля формы на сервер с помощью ajax


Передать все данные с формы на сервер с помощью ajax.

Передать все поля формы с помощью jQuery и ajax достаточно просто.
  1. Для начала подключим библиотеку jQuery.
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  2. Создадим форму из двух полей (Имя и email).
    <form method="POST" id="form">
        <legend>Пример передачи всех полей формы</legend>
        <div>
            <label for="name">Имя:</label>
            <input id="name" name="name" value="" type="text">
        </div>
        <div>
            <label for="email">Email адрес:</label>
            <input id="email" name="email" value="" type="email">
        </div>
        <input id="send" value="Отправить" type="submit">
    </form>

  3. Пишем код, который передает все состояние формы в сериализованном виде (включая все поля внутри формы).
    <script type="text/javascript" language="javascript">
        $('#send').click(function() {
            var serializeFormData = $('#form').serialize();
            
            $.ajax({
              type: 'POST',
              url: '/get-form-data',
              data: serializeFormData,
              success: function(data) {
                  console.log(data);
              },
              error:  function(data){
                  console.log('Внимание! произошла ошибка:' + data);
              }
            });
        });
    </script>

    При клике на кнопку отправить, будут переданы значения всех полей формы с id="form".
    Переменная serializeFormData принимает сериализованные данные формы - $('#form').serialize() и передает на сервер (в примере это url - url: '/get-form-data').
  4. Далее на стороне сервера принимаем и смотрим полученные данные.
    var_dump($_POST);

    Результат:
    Array
    (
    [name] => fixlix
    [email] => test@mail.com
    )

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.