在Jquery easyui中,异步提交表单有两种方式:使用ajax
方法和使用form
组件的submit
方法。下面我们将详细介绍这两种方式的示例。
ajax
方法<!DOCTYPE html>
<html>
<head>
<title>异步提交表单示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<form id="myForm" method="post" action="submit.php">
<input type="text" name="username" placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" />
<button id="submitBtn">提交</button>
</form>
<script>
$(document).ready(function() {
$('#submitBtn').click(function() {
$.ajax({
type: "POST",
url: "submit.php",
data: $('#myForm').serialize(),
success: function(response) {
alert('提交成功!');
},
error: function() {
alert('提交失败!');
}
});
});
});
</script>
</body>
</html>
在上面的示例中,我们给表单添加了一个id为“myForm”,然后使用ajax
方法监听提交按钮的点击事件,当点击提交按钮时,通过serialize
方法获取表单数据并异步提交到服务器。
form
组件的submit
方法<!DOCTYPE html>
<html>
<head>
<title>异步提交表单示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<form id="myForm" method="post" action="submit.php">
<input type="text" name="username" placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" />
<button id="submitBtn">提交</button>
</form>
<script>
$(document).ready(function() {
$('#myForm').form({
onSubmit: function() {
$(this).form('submit', {
success: function(response) {
alert('提交成功!');
},
error: function() {
alert('提交失败!');
}
});
return false; // 阻止表单默认的提交行为
}
});
});
</script>
</body>
</html>
在上面的示例中,我们使用了form
组件的onSubmit
事件监听表单提交,当表单提交时,通过form
组件的submit
方法异步提交表单数据,同样实现了异步提交的效果。
通过上面的两种方式,我们可以灵活地根据实际需求选择适合的方式来实现Jquery easyui中的异步表单提交。