Ajax请求

118 阅读1分钟

浏览器向网站发送请求时:URL和表单的形式提交

  • get
  • post 特点:页面刷新。

除此之外,也可以基于Ajax向后台发送请求(偷偷的发送请求)。

依赖jQuery

编写Ajax代码

get 请求

function click_me(){
    $.ajax({
        url: '/task/ajax/',
        type: 'get',
        data: {
            n1: 123,
            n2: 3
        },
        success: function (res){
            console.log(res)
        }
    })
}
def task_ajax(request):
    return HttpResponse('成功了')

post请求

function click_me(){
    $.ajax({
        url: '/task/ajax/',
        type: 'post',
        data: {
            n1: 123,
            n2: 3
        },
        success: function (res){
            console.log(res)
        }
    })
}

由于django接受post请求的时候需要传csrf_token,我们可以在cookie中取出,但是比较麻烦,

有一个方法可以免除csrf_token验证

from django.shortcuts import render, redirect, HttpResponse
from django.views.decorators.csrf import csrf_exempt

# 免除验证csrf_token的装饰器
@csrf_exempt
def task_ajax(request):
    return HttpResponse('成功了')

Ajax请求的返回值

{% block js %}
    <script>
        $(function () {
            bindBtn1Event();
        })

        function bindBtn1Event() {
            $('#btn1').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: {
                        n1: 123,
                        n2: 3
                    },
                    {#因为前端取到的时候时字符串类型,使用dataType: 'JSON',可以转换成对象#}
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        console.log(res.status)
                        console.log(res.data)
                    }
                })
            })
        }


    </script>
{% endblock %}
import json
from django.shortcuts import render, redirect, HttpResponse
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

# 免除验证csrf_token的装饰器
@csrf_exempt
def task_ajax(request):
    data_list = {'status': True, 'data': [11, 22, 34, 55]}
    json_str = json.dumps(data_list)
    # return HttpResponse(json_str)

    # django自带的序列化方法
    return JsonResponse(data_list)