以下是`ajaxForm`和`ajaxSubmit`方法的示例代码，它们通常与jQuery库一起使用。这里，我将提供一个简单的HTML表单，并使用`ajaxForm`和`ajaxSubmit`方法来实现表单的异步提交。
### 使用`ajaxForm`方法
<!DOCTYPE html>
<html>
<head>
<title>ajaxForm 示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').ajaxForm({
beforeSubmit: function() {
// 在提交前执行的代码，例如表单验证
return true; // 如果返回false，表单将不会提交
},
success: function(response) {
// 提交成功后的回调函数
alert('表单提交成功！');
console.log(response);
},
error: function() {
// 提交失败后的回调函数
alert('表单提交失败！');
}
});
});
</script>
</head>
<body>
<form id="myForm" action="/submit-form" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="email" name="email" placeholder="邮箱">
<button type="submit">提交</button>
</form>
</body>
</html>
### 使用`ajaxSubmit`方法
请注意，`ajaxSubmit`通常用于手动触发表单的提交，而不是在表单上自动绑定。以下是其示例：
<!DOCTYPE html>
<html>
<head>
<title>ajaxSubmit 示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<script>
$(document).ready(function() {
$('#submitBtn').click(function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
$('#myForm').ajaxSubmit({
beforeSubmit: function() {
// 在提交前执行的代码
return true; // 如果返回false，表单将不会提交
},
success: function(response) {
// 提交成功后的回调函数
alert('表单通过ajaxSubmit提交成功！');
console.log(response);
},
error: function() {
// 提交失败后的回调函数
alert('表单通过ajaxSubmit提交失败！');
}
});
});
});
</script>
</head>
<body>
<form id="myForm" action="/submit-form" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="email" name="email" placeholder="邮箱">
<button id="submitBtn" type="button">通过ajaxSubmit提交</button>
</form>
</body>
</html>
这两个示例都展示了如何在Web页面上使用`ajaxForm`和`ajaxSubmit`方法来异步提交表单，同时保持了代码的简洁性和高效性。