Как отправить форму AJAX в jQuery
Вы можете просто использовать метод $.post() в сочетании с методом serialize() для отправки формы с использованием AJAX в jQuery. Метод serialize() создает текстовую строку в кодировке URL путем сериализации значений формы для отправки. В строку сериализуются только «успешные элементы управления».
Давайте попробуем следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX Submit Form</title>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script>$(document).ready(function(){ $("form").on("submit", function(event){ event.preventDefault(); var formValues= $(this).serialize(); $.post("process_form.php", formValues, function(data){ // Отображаем возвращенные данные в браузере $("#result").html(data); }); });
});
</script>
</head><body> <form> <p> <label>Name:</label> <input type="text" name="name"> </p> <p> <label>Gender:</label> <label><input type="radio" value="male" name="gender"> Male</label> <label><input type="radio" value="female" name="gender"> Female</label> </p> <p> <label>Hobbies:</label> <label><input type="checkbox" value="music" name="hobbies[]"> Music</label> <label><input type="checkbox" value="sports" name="hobbies[]"> Sports</label> <label><input type="checkbox" value="dance" name="hobbies[]"> Dance</label> </p> <p> <label>Favorite Color:</label> <select name="color"> <option>Red</option> <option>Green</option> <option>Blue</option> </select> </p> <p> <label>Comment:</label> <textarea name="comment"></textarea> </p> <input type="submit" value="submit"> </form> <div id="result"></div></body></html>Вот PHP-скрипт нашего файла «process_form.php», который просто извлекает и выводит значения элементов формы, представленные пользователем, которые в конечном итоге отправляются обратно в браузер пользователя.
<h2>Here is the information submitted by you:</h2>
<p>Name: <b><?php echo $_POST["name"] ?? ''; ?></b></p>
<p>gender: <b><?php echo $_POST["gender"] ?? ''; ?></b></p>
<p>Favorite Color: <b><?php echo $_POST["color"] ?? ''; ?></b></p>
<p>Hobbies: <b><?php if(isset($_POST["hobbies"])){ echo implode(", ", $_POST["hobbies"]); } ?></b></p>
<p>Comment: <b><?php echo $_POST["comment"] ?? ''; ?></b></p>Чтобы узнать больше об обработке и проверке данных форм в PHP, подробнее см. Руководство по валидации форм в PHP.
