Js基本调试案例

ajax , 评论

前言

虽然现在前后端分离已经很普遍了，开发中还是免不了自己调试js，下边是ajax的简单调试

Http请求

后端接口

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * @author 当我遇上你
 * @公众号 当我遇上你
 * @since 2020-09-06
 */

@RestController
@RequestMapping("/ajax")
public class AjaxController {

    /**
     * 支持请求
     * Query Params
     * http://localhost:7777/ajax/get?name=admin
     * @param name
     * @return
     */
    @GetMapping("/get")
    public R get(@RequestParam String name) {
        return R.ok(name);
    }

    /**
     * 支持请求
     * 1. Query Params
     * http://localhost:7777/ajax/post?name=admin
     *
     * 2. form-data 文件上传时(contentType:multipart/form-data)
     * http://localhost:7777/ajax/post
     * name=admin
     *
     * 3. x-www-form-urlencoded
     * http://localhost:7777/ajax/post
     * name=admin
     *
     * @param name
     * @return
     */
    @PostMapping("/post")
    public R post(@RequestParam String name) {
        return R.ok(name);
    }

    /**
     * 支持请求
     * row
     * http://localhost:7777/ajax/body
     * body={
     *     "name":"admin"
     * }
     *
     * @param userDetail
     * @return
     */
    @PostMapping("/body")
    public R post(@RequestBody UserDetail userDetail) {
        return R.ok(userDetail);
    }

}

跨域配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * @author 当我遇上你
 * @公众号 当我遇上你
 * @since 2020-09-06
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

Ajax提交测试

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax提交</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
</head>
<body>

    <form action="" id="frm">
        <input type="text" name="name" autocomplete="off" placeholder="请输入账号" class="name"/>
        <button type="button" id="ok" style="height: 45px; width: 100px; margin: 50px">登录</button>
    </form>

</body>

<script>

    $('#ok').click(function () {
        post4()
    })


    /**
     * get Query Params
     * url展示参数
     */
    function get1() {
        var name = $(".name").val()
        console.log('name=', name)
        $.ajax({
            url: 'http://localhost:7777/ajax/get?name=' + name,
            success: function(response) {
                // {"code":0,"data":"admin","msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        })
    }

    /**
     * get Query Params
     * url展示参数
     */
    function get2() {
        var name = $(".name").val()
        console.log('name=', name)
        $.ajax({
            url: "http://localhost:7777/ajax/get",
            type: "get",
            data: {
                name: name
            },
            success: function(response) {
                // {"code":0,"data":"admin","msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        });
    }

    /**
     * post Query Params
     * url展示参数
     */
    function post1() {
        var name = $(".name").val()
        console.log('name=', name)
        $.ajax({
            url: 'http://localhost:7777/ajax/post?name=' + name,
            type: 'POST',
            success: function(response) {
                // {"code":0,"data":"admin","msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        })
    }

    /**
     * 提交表单
     * Content-Type: application/x-www-form-urlencoded; charset=UTF-8
     * url不展示参数
     */
    function post2() {
        var name = $(".name").val()
        console.log('name=', name)
        $.ajax({
            url: 'http://localhost:7777/ajax/post',
            type: 'POST',
            data: {
                name: name
            },
            success: function(response) {
                // {"code":0,"data":"admin","msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        })
    }

    /**
     * 提交表单， name必须与接收字段一致
     * Content-Type: application/x-www-form-urlencoded; charset=UTF-8
     * url不展示参数
     */
    function post3() {
        var frm = $('#frm');
        $.ajax({
            url: 'http://localhost:7777/ajax/post',
            type: 'POST',
            data: frm.serialize(),
            success: function(response) {
                // {"code":0,"data":"admin","msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        })
    }

    /**
     * 提交表单， 拼接参数
     * Content-Type: application/x-www-form-urlencoded; charset=UTF-8
     * url不展示参数
     */
    function post4() {
        var name = $(".name").val()
        var data = {
            name: name,
            sex:1
        }
        console.log('data:', Qs.stringify(data)) // data: name=admin&sex=1
        $.ajax({
            url: 'http://localhost:7777/ajax/post',
            type: 'POST',
            data: Qs.stringify(data),
            success: function(response) {
                // {"code":0,"data":"admin","msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        })
    }

    /**
     * 提交body-json
     * Content-Type: application/json; charset=UTF-8
     */
    function postbody() {
        var name = $(".name").val()
        console.log('name=', name)
        var data = {
            name: name
        }
        $.ajax({
            url: 'http://localhost:7777/ajax/body',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            success: function(response) {
                // {"code":0,"data":{"name":"a"},"msg":"执行成功"}
                console.log(response)
            },
            error: function(xhr) {
                console.error(xhr)
            }
        })
    }


</script>


</html>

Postman请求方式说明

form-data

等价于http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息；
由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。

x-www-form-urlencoded

等价于application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=java&age = 23

row

  • 可以上传任意格式的文本，可以上传text、json、xml、html等

binary

相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。

multipart/form-data与x-www-form-urlencoded区别

  • multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；
  • x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。

自然排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
function sort() {
    // 未排序
    var unordered  = {
        userId: 'admin',
        password: '123',
        sessionId: 'abc',
        ts: (new Date()).getTime(),
        appKey: "qweasd"
    }

    console.log('排序前:', Qs.stringify(unordered)) // 排序前: userId=admin&password=123&sessionId=abc&ts=1599474324556&appKey=qweasd

    // 根据key排序
    const ordered = {};
    Object.keys(unordered).sort().forEach(function(key) {
        ordered[key] = unordered[key];
    });

    console.log('排序后:', Qs.stringify(ordered)) // 排序后: appKey=qweasd&password=123&sessionId=abc&ts=1599474324556&userId=admin
}

MD5

1
2
3
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

let sign = md5(Qs.stringify(ordered));

最后

本文到此结束，感谢阅读。如果您觉得不错，请关注公众号【当我遇上你】，您的支持是我写作的最大动力。

当我遇上你

勿在浮沙筑高楼