使用
jQuery 提交表单有同步和异步两种常见方式：
### 同步
提交表单
同步
提交会使页面跳转至
表单 `action` 属性指定的地址。以下是示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
jQuery 同步
表单提交</title>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<form id="myForm" action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<br>
<button id="submitBtn">
提交</button>
</form>
<script>
$(document)
.ready(function() {
$('#submitBtn')
.click(function() {
$('#myForm')
.submit();
});
});
</script>
</body>
</html>
```
在上述代码中，为按钮绑定 `click` 事件，点击按钮时调用 `$('#myForm')
.submit()` 方法
提交表单。
### 异步
提交表单（AJAX）
异步
提交不会使页面跳转，而是在后台与服务器交互。以下是示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
jQuery 异步
表单提交</title>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<form id="myForm" action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<br>
<button id="submitBtn">
提交</button>
</form>
<div id="result"></div>
<script>
$(document)
.ready(function() {
$('#submitBtn')
.click(function(e) {
e
.preventDefault(); // 阻止
表单默认
提交行为
var formData = $('#myForm')
.serialize(); // 序列化
表单数据
$
.ajax({
url: $('#myForm')
.attr('action'),
type: $('#myForm')
.attr('method'),
data: formData,
success: function(response) {
$('#result')
.text('
提交成功: ' + response);
},
error: function(error) {
$('#result')
.text('
提交失败: ' + error
.statusText);
}
});
});
});
</script>
</body>
</html>
```
在这个例子中，点击按钮时先阻止
表单的默认
提交行为，然后使用 `serialize()` 方法序列化
表单数据，最后通过 `$
.ajax()` 方法将数据异步发送到服务器，并根据响应结果显示相应信息。
扫一扫
3212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
