Django ajax

什么是ajax?

　　AJAX(Asynchronius Javascript And XML) 异步的Javascript和XML，使用js语言和服务器进行，传输数据为XML（也可以是其它类型）

　　ajax 发送请求局部刷新异步

　　js里面把对象转换成 json JSON.stringify() 反序列化 JSON.parse()

通过ajax实现数据请求小案例：

加法小案例
view代码
def index(request):
    print(request.method)
    if request.method == 'POST':
        i1 = request.POST.get('a1')
        i2 = request.POST.get('a2')
        i3 = int(i1)+ int(i2)
        # return render(request,'index.html',{"i1":i1,"i2":i2,"i3":i3})
        return HttpResponse(i3)
    return render(request,'index.html')

模板文件代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="i1">
    + <input type="text" name="i2">
    =<input type="text" name="i3">
    <button id="b1">计算</button>
{% load static %}
    <script src="{% static 'jQuery/js/jquery.js' %}"></script>
    <script>
        $('#b1').click(function () {
            $.ajax({
                url:'/index/',
                type:'post',
                data:{
                    a1:$('input[name="i1"]').val(),
                    a2:$('input[name="i2"]').val(),
                },
                success:function (ret) {
                    $('input[name="i3"]').val(ret)
                }
            })
        })
    </script>
</body>
</html>

ajax参数

获取数据实例

前端模板 文件传列表后端获取

后端view代码
def test(request):
    name = request.POST.get('name')
    age = request.POST.get('age')
    hobby = request.POST.getlist('hobby[]',)
    print(request.POST)
    print(name)
    print(age)
    print(hobby)
    return HttpResponse("ok")

前端模板文件内容
$('#b2').click(function () {
            $.ajax({
                url:'/test/',
                type:'post',
                data:{
                   name:'ivy',
                    age:'18',
                    hobby:["reading","writing","singing"]
                },
                success:function (ret) {
                    alert(111)
                }
            })
        })

实例二

通过传参方式改变后端取值方法
view里代码
import json
def test(request):
    name = request.POST.get('name')
    age = request.POST.get('age')
    hobby = json.loads(request.POST.get('hobby'))
    print(request.POST)
    print(name)
    print(age)
    print(hobby)
    return HttpResponse("ok")

前端代码
 $('#b2').click(function () {
            $.ajax({
                url:'/test/',
                type:'post',
                data:{
                   name:'ivy',
                    age:'18',
                    hobby:JSON.stringify(["reading","writing","singing"])
                },
                success:function (ret) {
                    alert(111)
                },
                error:function (ret) {
                    alert(ret)
                }
            })
        })

上传文件实例

view里面的代码
from django.http.response import JsonResponse
def upload(request):
    file_obj = request.FILES.get("f1")
    with open(file_obj.name,'wb') as f:
        for i in file_obj:
            f.write(i)

    return JsonResponse({'status':200,'msg':"successful"})

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
    <input type="file" id="f1">
    <button id="b3">上传文件</button>
{% load static %}
    <script src="{% static 'jQuery/js/jquery.js' %}"></script>
    <script>

         $('#b3').click(function () {
             var form_data = new FormData();
             form_data.append("f1",$('#f1')[0].files[0]); //获取文件对象
          $.ajax({
                url:'/upload/',
                type:'post',
              processData:false, //告诉jquery不要处理发送的数据
              contentType:false, //告诉jQuery不去设置Content_Type
                data:form_data,
                success:function (ret) {
                    console.log(ret)
                },
                error:function (ret) {
                    alert(ret)
                }
            })
        })
    </script>
</body>
</html>

Ajax通过django的csrf校验

提交post请求的设置
1.在data中添加csrfmiddlewaretoken 键值对
 $('#b1').click(function () {
            $.ajax({
                url:'/index/',
                type:'post',
                data:{
                    csrfmiddlewaretoken:$('input[name="csrfmiddlewaretoken"]').val(),
                    a1:$('input[name="i1"]').val(),
                    a2:$('input[name="i2"]').val(),
                },
                success:function (ret) {
                    $('input[name="i3"]').val(ret)
                }
            })
        })

2.方法2
$('#b1').click(function () {
            $.ajax({
                url:'/index/',
                type:'post',
                headers:{
                  'x-csrftoken':$('input[name="csrfmiddlewaretoken"]').val(),
                },
                data:{
                    a1:$('input[name="i1"]').val(),
                    a2:$('input[name="i2"]').val(),
                },
                success:function (ret) {
                    $('input[name="i3"]').val(ret)
                }
            })
        })

因为中间件里面就是拿这两个值来做比较的。

引入js文件自动设置全局

js文件代码如下
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

加装饰器做csrf中间件校验

from django.views.decorators.csrf import csrf_exempt,csrf_protect,ensure_csrf_cookie

csrf_exempt：表示不需要进行csrf校验

csrf_protect：表示某一个视图需要csrf校验 当把全局的注释以后

ensure_csrf_cookie: 确保视图返回的时候带上对应的cookie，不用在模板里面写{% csrf_token%}

posted @ 2019-08-07 18:02 ivy_wang 阅读(121) 评论(0) 编辑收藏举报

刷新页面返回顶部

ivy_wang

Django ajax

什么是ajax?

公告