JSON对象转成form提交数据

JSON对象转成form提交数据

当contentType: 'application/x-www-form-urlencoded'方式提交时,提交的数据中为复杂的json,在签名验证时,会很麻烦,在网上搜索都没有找到合适的代码,都是只支持第一层转化,并且都是复制的,就写了一个不限层的转换方法给需要的朋友参考一下,本人并非js开发

转换方法

                /**
                 * JSON对象转为Form提交数据
                 * @param data Json数据
                 * @param key key
                 * @param type 1.数组或对象,-1.值
                 */
                var JsonToFormParmas = function (data, key = '', type = -1) {
                    var params = [];
                    for (var key1 in data) {
                        var val1 = data[key1];
                        if (Array.isArray(val1) == true) {
                            for (var key2 in val1) {
                                var val2 = val1[key2];
                                if (Array.isArray(val2) == true) {
                                    if (type == 1)
                                        params = params.concat(JsonToFormParmas(val2, `${key}[${key1}][${key2}]`, 1));
                                    else
                                        params = params.concat(JsonToFormParmas(val2, `${key}${key1}[${key2}]`, 1));
                                }
                                else if (typeof val2 === 'object') {
                                    if (type == 1)
                                        params = params.concat(JsonToFormParmas(val2, `${key}[${key1}][${key2}]`, 1));
                                    else
                                        params = params.concat(JsonToFormParmas(val2, `${key}${key1}[${key2}]`, 1));
                                }
                                else {
                                    if (type == 1) {
                                        params.push({ key: `${key}[${key1}][]`, val: val1[key2] });
                                    }
                                    else {
                                        params.push({ key: `${key}${key1}[]`, val: val1[key2] });
                                    }
                                }
                            }
                        }
                        else if (typeof val1 === 'object') {
                            if (type == 1)
                                params = params.concat(JsonToFormParmas(val1, `${key}[${key1}]`, 1));
                            else
                                params = params.concat(JsonToFormParmas(val1, `${key}${key1}`, 1));
                        }
                        else {
                            if (type == 1) {
                                params.push({ key: key + `[${key1}]`, val: val1 });
                            }
                            else {
                                params.push({ key: key1, val: val1 });
                            }
                        }
                    }
                    return params;
                }

测试代码如下

                var data = {
                    name: 'name0',
                    isb: true,
                    list1: [1, 2],
                    list2: [
                        {
                            name: 'name1',
                            value: 'value1'
                        },
                        {
                            name: 'name2',
                            value: 'value2'
                        }],
                    data1: {
                        name: 'name3',
                        list3: [1, 2],
                        list4: [{
                            name: 'name1',
                            value: 'value1'
                        }],
                        data2: {
                            name: 'name4'
                        }
                    }
                };var params = JsonToFormParmas(data);

测试结果

 1 [
 2     {
 3         "key": "name",
 4         "val": "name0"
 5     },
 6     {
 7         "key": "isb",
 8         "val": true
 9     },
10     {
11         "key": "list1[]",
12         "val": 1
13     },
14     {
15         "key": "list1[]",
16         "val": 2
17     },
18     {
19         "key": "list2[0][name]",
20         "val": "name1"
21     },
22     {
23         "key": "list2[0][value]",
24         "val": "value1"
25     },
26     {
27         "key": "list2[1][name]",
28         "val": "name2"
29     },
30     {
31         "key": "list2[1][value]",
32         "val": "value2"
33     },
34     {
35         "key": "data1[name]",
36         "val": "name3"
37     },
38     {
39         "key": "data1[list3][]",
40         "val": 1
41     },
42     {
43         "key": "data1[list3][]",
44         "val": 2
45     },
46     {
47         "key": "data1[list4][0][name]",
48         "val": "name1"
49     },
50     {
51         "key": "data1[list4][0][value]",
52         "val": "value1"
53     },
54     {
55         "key": "data1[data2][name]",
56         "val": "name4"
57     }
58 ]

 

新建一个index.html页面测试

<script>
    var data = {
        name: 'name',
        isb: true,
        list: [,],
        list: [
            {
                name: 'name',
                value: 'value'
            },
            {
                name: 'name',
                value: 'value'
            }],
        data: {
            name: 'name',
            list: [,],
            list: [{
                name: 'name',
                value: 'value'
            }],
            data: {
                name: 'name'
            }
        }
    };
    layui.$.ajax({
        url: 'https://www.baidu.com',
        data: data,
        async: false,
        contentType: 'application/x-www-form-urlencoded'
    })
</script>

 

浏览器验证结果