jQuery. Передать все поля формы на сервер с помощью ajax
Передать все данные с формы на сервер с помощью ajax.
Передать все поля формы с помощью jQuery и ajax достаточно просто.
- Для начала подключим библиотеку jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> - Создадим форму из двух полей (Имя и 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> - Пишем код, который передает все состояние формы в сериализованном виде (включая все поля внутри формы).
<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'). - Далее на стороне сервера принимаем и смотрим полученные данные.
var_dump($_POST);
Результат:Array
(
[name] => fixlix
[email] => test@mail.com
)
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.