Ajax提交之快速获取表单值

前言

表单请求经常需要进行表单验证, 然后再进行请求, 再对页面进行后处理, 比如弹出个对话框提示请求成功。
普通的form提交是不能满足需求的, 要通过AJAX来处理。

使用jQuery的submit函数

jQuery提供了submit函数, 来接管提交事件,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('#form-userInfo').submit(function (event) {
// 1. 拦截默认的提交方式
event.preventDefault();

// 2. 获取表单值
var username = $('input[name="username"]').val();

// 3. ajax请求
$.ajax({
url: '/login', // url where to submit the request
type : 'POST', // type of action POST || GET
dataType : 'json', // data type
data : { username: username }, // post data || get data
success : function(result) {
// 3.1. 请求成功
console.log(result);
},
error: function(xhr, resp, text) {
// 3.2. 请求失败
console.log(xhr, resp, text);
}
})
});

serializeArray 序列化参数

获取参数的方式有很多种, 上面使用的是最简单的方法, 通过获取元素来获取值。
但是如果有很多个参数, 比如用户名、密码、性别、城市、手机号、身份证号等等。
每个都要去手动获取元素再来获取值, 就太麻烦了。

jQuery提供了serializeserializeArray两个方法去序列化参数, 关于这两个方法的不同, 可以查阅参考资料和jQuery文档。
这里使用serializeArray, 主要是第二步获取参数的方式不同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$('#form-userInfo').submit(function (event) {
// 1. 拦截默认的提交方式
event.preventDefault();

// 2. 获取表单值, 看这里!!!!
var data = {};
$(this).serializeArray().map(function(x){data[x.name] = x.value;});
console.log(data);

// 3. ajax请求
$.ajax({
url: '/login', // url where to submit the request
type : 'POST', // type of action POST || GET
dataType : 'json', // data type
data : { username: username }, // post data || get data
success : function(result) {
// 3.1. 请求成功
console.log(result);
},
error: function(xhr, resp, text) {
// 3.2. 请求失败
console.log(xhr, resp, text);
}
})
});

参考资料