• Django之AJAX传输JSON数据


    Django之AJAX传输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信息

    login.html

    <!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无法解析使用:

      img

    ( 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);
    
  • 相关阅读:
    Ghost Button制作教程及设计趋势分析
    onhashchange事件--司徒正美
    window.location.hash属性介绍
    优质UI的7条准则(一)
    当在浏览器地址栏输入一个网址的时候,究竟发生了什么?
    全球最快的JS模板引擎
    眨眼登录表单
    DIV+CSS规范命名
    es6--export,import
    es6--class
  • 原文地址:https://www.cnblogs.com/TMesh/p/11755302.html
Copyright © 2020-2023  润新知