标签：数据显示 返回 总结 cat 用户名 数据传递 ext serialize error
因为开发一个小细节，本来是上传文件，填写文件名进行ajax提交，但是没有获取到文件的绝对地址，
所以使用了form表单提交文件，然后又觉得form表单+ajax提交联系起来比较好，不用改动太多代码。
区别：
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属性；
form表单submit提交内容，跟ajax异步提交form表单的区别，
标签：数据显示 返回 总结 cat 用户名 数据传递 ext serialize error
原文地址：https://www.cnblogs.com/Koaler/p/12047303.html
