Django之前后端交互使用ajax的方式

1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式"

ajax与form表单的区别在于: form 是整个页面刷新提交的, 但是ajax 是局部提交局部验证的, 这个是他们的唯一区别

2. 前端ajax请求方式:

$.ajax({
    url: '/ajax/',  # 请求路径
    type: 'post',  # 请求方式
    data: {  # get和post都以data字典方式携带数据
        usr: $('.usr').val(),  # 获取输入框内容
        pwd: $('.pwd').val(),
    },
    success: function (data) {
        console.log(typeof(data), data);  # 得到后台返回的数据（普通字符串 | json类型数据）
    }
})

ajax发送的请求方式

3. 后端接受ajax请求的相应方式:

    from django.http import JsonResponse
    # 返回json类型数据的终极方法
    dic = {'status': 'ok', 'msg': '登录成功'}
    return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False})  # *****
    # 参数含义：
    # 返回值保证是字典类型
    # safe在False情况下就支持返回列表或字符串
    # 取消json的dumps方法采用的默认ascii编码中文

后端代码使用JsonResponse

def ajax(request):

    print(request.is_ajax())

    if request.method == 'GET':
        usr = request.GET.get('usr', None)
        pwd = request.GET.get('pwd', None)
        print('get>>>', usr, pwd)
        msg = request.GET.get('msg', None)
        print('get>>>', msg)
    if request.method == 'POST':
        usr = request.POST.get('usr', None)
        pwd = request.POST.get('pwd', None)
        print('post>>>', usr, pwd)
        msg = request.GET.get('msg', None)
        print('post>>>', msg)
    # ajax请求，后台只需要返回信息，所以不会出现render、redirect

    # 1、返回字符串类型数据
    # return HttpResponse('OK')

    # 2、返回json类型数据
    # dic = {'status': 'ok', 'msg': '登录成功'}
    # data = json.dumps(dic, ensure_ascii=False)
    # 直接返回json模块处理后的json数据(json字符串)，前台接收到的是一个json类型的字符串
    # return HttpResponse(data)
    # 返回json字符串是，还告诉前台，该数据就是json类型字符串
    # return HttpResponse(data, content_type='application/json')

    # 3、直接通过JsonResponse返回json数据
    dic = {'status': 'ok', 'msg': '登录成功'}
    # 返回值保证是字典类型
    # safe在False情况下就支持返回列表或字符串
    # 取消json的dumps方法采用的默认ascii编码中文
    return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False})

后端得到ajax请求的案例

前端

<body>

{# form表单提交数据：form提交数据后，一定会发生页面的跳转 #}
{# ajax提交数据：只向后台请求数据，请求的过程是异步的，请求成功后有一个回调函数，携带后台返回的数据 #}
<form action="/form/" method="post">

    <input class="usr" type="text" name="usr">
    <input class="pwd" type="password" name="pwd">
    <input class="ajax-submit" type="button" value="登录">
    <input class="ajax-submit_bac" type="button" value="了解">

</form>


</body>

form表单的简单发送请求

<script>
    $('.ajax-submit').click(function () {
        {#window.alert(123)#}
        {#window.document.getElementById()#}
        {#window.location.href = 'https://www.baidu.com'#}

        $.ajax({
            {#注：url中可以拼接请求数据，get|post方式在后台都通过GET对象获取该数据#}
            url: '/ajax/?msg=qwer',
            type: 'post',
            data: {
                usr: $('.usr').val(),
                pwd: $('.pwd')[0].value,
            },
            {#ajax发生get|post请求，用data携带数据#}
            success: function (data) {
                {#返回值为普通字符串#}
                {#console.log(">>>>", data);#}
                {#alert(data);#}
                {#window.location.href = data#}

                {#返回值为json类型数据#}
                console.log(typeof(data), data);
                {#前台如何处理json类型字符串#}
                {#data = JSON.parse(data);#}
                {#console.log(typeof(data), data, data.msg);#}
            },
            error: function (e) {

            }
        })
    })

    $('.ajax-submit_bac').click(function () {
        {#jsonStr = '{"name": "Bob"}';#}
        dic = {
            name: 'HOU'
        };
        jsonStr = JSON.stringify(dic);

        $.ajax({
            url: '/ajax-bac/',
            type: 'post',
                {# dataType: 'json',  了解：告诉jq，一定按json类型数据解析（默认后台返回的一定是json类型数据, 如果不是就拿不到结果） #}
            {# 前台主动传入json类型的字符串, 后台需要手动处理body（前台json数据类型还不能错） #}
            contentType: 'application/json',
            data: jsonStr,
            success: function (data) {
                console.log(typeof(data), data);
            },
            error: function (e) {
                console.log(e)
            }
        })
    })
</script>

ajax发送请求的案例