📅 最后修改于: 2023-12-03 15:16:47.710000 🧑 作者: Mango
jQuery 提供了一系列方便操作表单的方法，其中之一就是 submit() 方法。
submit() 方法触发提交表单事件，可以用于提交表单数据或者执行表单的自定义行为。该方法可以在表单元素上直接调用，也可以通过 $(selector).submit() 选择器来调用。
// 直接调用
document.getElementById("myForm").submit();
// 通过选择器调用
$("form").submit();
如果需要在提交表单之前进行参数校验或数据处理，可以先取消表单的默认提交事件，再在事件回调中手动提交表单数据。
$("#myForm").submit(function(event) {
event.preventDefault(); // 取消默认事件
// 参数校验和数据处理
var formData = $(this).serialize();
// 手动提交表单数据
$.ajax({
type: "POST",
url: "/api/submit",
data: formData,
success: function(data) {
// 表单提交成功
},
error: function(err) {
// 表单提交出错
}
});
});
以下是一个例子，使用 submit() 方法实现表单提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Submit Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm" action="/api/submit" method="post">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<button type="submit">Submit</button>
</form>
<script>
$("#myForm").submit(function(event) {
event.preventDefault(); // 取消默认事件
// 参数校验和数据处理
var formData = $(this).serialize();
// 手动提交表单数据
$.ajax({
type: "POST",
url: "/api/submit",
data: formData,
success: function(data) {
alert("表单提交成功！");
},
error: function(err) {
alert("表单提交出错！");
}
});
});
</script>
</body>
</html>
上述示例中，当用户点击表单提交按钮时，会触发 submit() 方法，首先取消表单的默认提交事件，然后将表单数据序列化后通过 AJAX 请求提交到服务器。如果提交成功，弹出提示框提示用户提交成功；如果提交失败，弹出提示框提示用户提交出错。