使用Ajax方法实现form表单的提交
1.区别 联系
在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端的控制层,后端会控制页面的跳转及数据传递。
但是当不希望页面跳转或者是想要将控制权放在前端,让JS来控制页面的跳转或者数据变化。这个时候往往需要异步操作。
也就是使用ajax方式,通过ajax方法实现form表单的提交并进行后续的异步操作。
2.提交方式示例
1.常见的form表单提交方式
代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>常见form提交方式</title>
<meta http-equiv="description" content="常见form提交方式">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>
用户名:<input name="userName" type="text" id="txtUserName" tabindex="1"
size="15" value="" />
</p>
<p>
密 码:<input name="password" type="password" id="TextBox2"
tabindex="2" size="16" value="" />
</p>
<p>
<input type="submit" value="登录"> <input type="reset"
value="重置">
</p>
</form>
</div>
</body>
</html>
使用form表单的action和 method来决定提交到的地方和提交的方式。这也是常用的提交方式。
当点击登录按钮后,即触发form表单的提交事件,数据传输至后端,然后由后端来控制页面跳转到哪里和数据怎么传递。
这样的话,第一更新以后你需要刷新页面,第二控制权在后台,不便于追踪。
2.ajax实现form提交方式
说一下修改的地方:
A. 将form元素的属性action和method去掉,必须添加id=”xxxx”,form元素就变为< form id=”xxxx”>
B. 将提交按钮的button的type=”submit” 改为 type=”button”,设置一个 id名称。
C. 在js文件中写入如下通用代码:
$("#按键的id").click(function () {
$.ajax({
type: "POST", //提交的方法
url:"/user/login", //提交的地址
data:$('#xxx').serialize(), //序列化表单值输出
async: false,
error: function(request) { //失败的话
alert("提交失败 error");
},
success: function(data) { //成功
alert(data); //就将返回的数据显示出来
window.location.href="跳转页面"
}
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
具体示例:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单提交Ajax的使用</title>
<meta http-equiv="description" content="ajax方式">
<!-- 需要引入Jquery任意版本 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 表单提交Ajax的使用 -->
<script type="text/javascript">
function login() {
$.ajax({
//注意一下这几个参数
type : "POST", //方法类型
dataType : "JSON", //预期服务器返回的数据类型JSON
url : "/user/login", //提交到的 url
data : $('#form1').serialize(), //序列化输出字符串类型的结果
success : function(result) {
console.log(result); //打印服务端返回的数据(调试用)
if (result.resultCode == 200) { //200状态码 = 成功
alert("请求成功 success!");
}
;
},
error : function() {
alert("请求失败,error!");
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" οnsubmit="return false" action="##" method="post">
<p>
用户名:<input name="userName" type="text" id="txtUserName" tabindex="1"
size="15" value="" />
</p>
<p>
密 码:<input name="password" type="password" id="TextBox2"
tabindex="2" size="16" value="" />
</p>
<p>
<input type="button" value="登录" οnclick="login()">
</p>
</form>
</div>
</body>
</html>
3.总结和提醒
在常用方式中,点击的登录按钮的type为”submit”类型;form的action不为空;
在Ajax方式中需要注意的是$.ajax方法中的参数:dataType和data属性的设置。必须添加id属性。