区别：
Form表单提交：一般都会进行页面跳转；
Ajax异步提交：可以不进行页面跳转；
Form表单提交
<body>
<div id="forms”>
<form id="form1" action="/users/login" method="post">
<p>用户名：<input name="userName" type="text" id="userName" value="" /></p>
<p>密 码：<input name="password" type="password" id="password" value="" /></p>
<p><input type="submit" value="确认"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
用form表单的action和method来确定提交到的地址和提交的方式；
点击确认按钮会触发form表单的提交事件，数据传输到后端，然后由servlet后台控制页面跳转以及数据传递。
Ajax实现form提交方式：
<body>
<div id="forms">
<form id="form1">
<p>用户名：<input name="userName" type="text" id="userName" value="" /></p>
<p>密 码：<input name="password" type="password" id="password" value="" /></p>
<p><input type="button" id="btn" value="登录"> <input type="reset" value="重置"></p>
</form>
</div>
<script type="text/javascript">
$("#btn").click(function () {
$.ajax({
type: "POST", //提交的方法
url:"/user/login", //提交的地址
data:$("#form1").serialize(), //序列化表单值输出
async: false,
error: function(request) { //失败的话
alert("提交失败 error");
},
success: function(data) { //成功
alert(data); //就将返回的数据显示出来
window.location.href="跳转页面"
}
});
});
</script>
</body>
总结：
在常用方式中，点击的登录按钮的type为“submit”类型，form表单的action不为空；
在ajax方式中要注意$.ajax方法中的参数：dataTyp和data属性的设置。而且要添加id属性；
扫一扫
1700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
