Django之AJAX传输JSON数据

Django之AJAX传输JSON数据
- AJAX 中 JSON 数据传输：
- django响应JSON类型数据：
  - django 响应 JSON 类型数据：

AJAX 中 JSON 数据传输：

AJAX请求JSON类型数据：

AJAX通过GET或者POST方式都可以发送JSON数据请求，需要指定内容类型：‘Content-Type':'application/json'，post请求必须设置
headers :{ 'X-CSRFToken' : $ ( ' input [ name =csrfmiddlewaretoken]' ).val()}，在请求头部进行csrf认证；
请求数据data经过 JSON .stringify()进行序列化
AJAX在前端发送的JSON数据，django不能自动解析，因此request.GET或request.POST都为空，JSON数据在请求体request.body中需要手动解析(解码反序列化)。

django响应JSON类型数据：

django视图函数通过 import json导入模块，对数据需要返回的数据进行json.dumps()序列化

AJAX 请求 JSON 类型数据：

以post请求为例，get请求不需要csrf认证，故不需要JSON数据请求的headers信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <title>login</title>

</head>

<body>

<div>

    用户名：<input type="text" name="username" id="username">

    密码：<input type="password" name="password" id="password">

    <input type="button" id="submit" value="提交">{% csrf_token %}

    <span id="status"></span>

</div>

</body>

<script>

    //以post方式请求

    $(function () {

        $('#submit').click(function () {

            $.ajax({

                url: "{% url 'auth' %}",//请求路径

                type: 'post',            //请求方式

                //(1)默认数据请求

                //data: { //请求数据(post请求的csrf认证键值对固定)

                  //  username: $('#username').val(),

                    //password: $('#password').val(),

                    //csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),

                //},

                //(2)JSON数据请求

                'Content-Type':'application/json',

                headers:{'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val()},//在请求头通过csrf认证，键固定

                data:JSON.stringify({

                    username: $('#username').val(),

                    password: $('#password').val(),

                }),

                success: function (response) {//请求回调函数

                    if (response == 1) {

                        location.href = "{% url 'index' %}"

                    } else {

                        $('#status').text('账号或密码有误！')

                    }

                }

            })

        })

    });

</script>

</html>

urls.py

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^login/',views.login,name='login'),

    url(r'^auth/',views.auth,name='auth'),

    url(r'^index/',views.index,name='index'),

]

views.py

def auth(request):

    if request.method == 'POST':

        #（1）默认数据请求

        # name = request.POST.get('username')

        # psd = request.POST.get('password')

        #（2）JSON数据请求

        request_data=request.body

        print(request_data)

        request_dict=json.loads(request_data.decode('utf-8'))

        name=request_dict.get('username')

        psd=request_dict.get('password')

        if name == "yang" and psd == '123':

            status = 1

        else:

            status = 0

        return HttpResponse(status)

django 响应 JSON 类型数据：

AJAX中回调函数接收到的数据都为string字符串类型，因此在视图函数响应的原始数据只有字符串类型的才能被AJAX正常接收，其它的数据类型(数字，列表，字典等)都必须通过json数据类型进行传输

（1）视图函数响应字符串，AJAX正常接收，其否则响应的其它数据类型也都是string无法解析使用：

（ 2 ）视图函数响应 JSON 数据类型：

使用HttpResponse响应手动序列化后JSON数据直接响应，前端得到的响应数据需要被动反序列化成对应的数据类型
使用HttpResponse响应手动序列化后JSON数据并设置参数content_type= 'application/json' 前端得到的响应数据是经过JSON对象自动进行反序列化后的对应数据类型
使用HttpResponse响应不需要手动序列化JSON数据，直接响应即可，但是对于非字典类型的数据类型需要设置参数safe= False ，前端得到的响应数据是经过JSON对象自动进行反序列化后的对应数据类型

①使用HttpResponse响应：未告知类型，前端需要被动解析

视图函数：

data={ 'status' :[1,2,3], 'info' : 'login' }

 return  HttpResponse(json.dumps(data)) #  直接发送  json  字典，前端需要被动反序列化

AJAX回调函数：

success:  function  (response) { //  请求回调函数参数response被动反序列化 

     console .log( JSON .parse(response));

     console .log( typeof   JSON .parse(response));

②使用HttpResponse响应，告知类型，前段自动调用JSON对象解析

视图函数：

data={ 'status' :[1,2,3], 'info' : 'login' }

 return  HttpResponse(json.dumps(data),content_type= 'application/json' ) #  发送  json  字典，告知类型

return HttpResponse(json.dumps(ret,ensure_ascii=False)) #ensure_ascii=False 是告诉json不要对中文进行编码，不然返回给前端的数据中如果有中文的话会被编码成unicode类型的数据，导致前端看不到中文

AJAX回调函数：

success:  function  (response) { //  请求回调函数参数response自动反序列化 

     console .log(response);

     console .log( typeof  response);

③ 使用 JsonResponse 响应，不需要手动进行序列化，同时也不需要告知类型，在响应除字典以外的数据类型时，需要添加参数safe=False

from  django.http  import  JsonResponse

响应字典视图函数：

data={'status':[1,2,3],'info' *'l in' }

  return Json sponse(data) #  使用  JsonResponse,  直接响应数据 

响应非字典视图函数：

data=[{ 'status' :[1,2,3], 'info' : 'login' }]

 return  JsonResponse(data,safe= False ) #  使用  JsonResponse,  直接相应数据  ,  字典以外数据类型徐设置参数  safe=False

AJAX回调函数：

success:  function  (response) { //  请求回调函数参数response自动反序列化 

     console .log(response);

     console .log( typeof  response);