前端向后端传递json数据

• 最近在使用ajax向后端传递数据时，遇到了一些问题，自己简单研究了一下，做个总结。

问题发现

• 起初我的ajax请求是这样写的

        $("#error_data").click(function (){
            var url = "/show/test_json/";
            var data = {
                "list": [1,2],
                "name": "xxx",
                "text": "中国人"
            };

            $.ajax({
                url: url,
                data: data,
                type: "POST",
                contentType : "application/json",
                traditional: true,
                success: function(data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

• 然后我发现我在后端接受到的数据是这样的

	print(request.POST)
    print(request.method)
    print(request.body)

<QueryDict: {}>
POST
b'list=1&list=2&name=xxx&text=%E4%B8%AD%E5%9B%BD%E4%BA%BA'

• 当我准备给request.body解码后然后进行序列化，这个时候错误就发生了

json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

问题解决

• 在网上找了一些资料发现，问题原因在于，我没有对往后端传的数据，进行处理；
• 需要将json对象转换为json字符串，然后在向后端传递

        $("#send_btn").click(function (){
            var url = "/show/test_json/";
            var data = {
                "list": [1,2],
                "name": "xxx",
                "text": "中国人"
            };

            $.ajax({
                url: url,
                data: JSON.stringify(data),
                type: "POST",
                contentType : "application/json",
                dataType: "text",
                traditional: true,
                success: function(data) {
                    console.log(data);
                    console.log(JSON.parse(data));

                },
                error: function (data) {
                    console.log(JSON.parse(data));
                }
            });

        });

• 后端接收到的数据

<QueryDict: {}>
POST
b'{"list":[1,2],"name":"xxx","text":"\xe4\xb8\xad\xe5\x9b\xbd\xe4\xba\xba"}'

• 这样后端就可以对request.body内容解码后，进行序列化了。

问题总结

• 前端向后端传递json数据时，需要使用JSON.stringify()将json对象转化为json字符串。
• Django后端接收前端传递过来的json数据，不能使用request.POST而是要使用request.body
• request.body的数据为bytes类型，要想使用，需要先解码。