如何在 jQuery 中通过 AJAX 提交表单
答案：使用jQuery $.post() 方法
您可以简单地将 $.post() 方法与 serialize() 方法结合使用，在 jQuery 中使用 AJAX 提交表单。 serialize() 方法通过序列化用于提交的表单值来创建一个 URL 编码的文本字符串。 只有"成功的控件"被序列化为字符串。
让我们试试下面的例子来了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX Submit Form</title>
<script src="https://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.asp", 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>这是我们的"process_form.php"文件的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 表单验证的教程。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements