Ajax提交之快速获取表单值

发表于 分类于 阅读次数： 本文字数： 434 阅读时长 ≈ 2 分钟

前言

表单请求经常需要进行表单验证, 然后再进行请求, 再对页面进行后处理, 比如弹出个对话框提示请求成功。
普通的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提供了serialize和serializeArray两个方法去序列化参数, 关于这两个方法的不同, 可以查阅参考资料和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);
        }
    })
});

参考资料