zoukankan      html  css  js  c++  java
  • django中使用Ajax

    内容:

    1.Ajax原理与基本使用

    2.Ajax发送get请求

    3.Ajax发送post请求

    4.Ajax上传文件

    5.Ajax设置csrf_token

    6.django序列化

    参考:https://www.cnblogs.com/liwenzhou/p/8718861.html

    1.Ajax原理与基本使用

    关于Ajax的原理及其基本使用,直接看这篇博文即可:https://www.cnblogs.com/wyb666/p/9387488.html

    2.Ajax发送get请求

    views.py:

     1 # Ajax get请求的后端处理函数
     2 def ajax_add(request):
     3     print(request.GET)
     4     print(request.GET.get("i1"))
     5     print(request.GET.get("i2"))
     6 
     7     i1 = int(request.GET.get("i1"))
     8     i2 = int(request.GET.get("i2"))
     9 
    10     ret = i1 + i2
    11     return HttpResponse(ret)

    前端代码:

     1 <input type="text" id="i1">+
     2 <input type="text" id="i2">=
     3 <input type="text" id="i3">
     4 <input type="button" value="AJAX get提交" id="b1">
     5 
     6 <script src="/static/jquery-3.3.1.js"></script>
     7 <script>
     8     $("#b1").on("click", function () {
     9         var i1 = $("#i1").val()
    10         var i2 = $("#i2").val()
    11         // 往后端发数据
    12         $.ajax({
    13             url: "/ajax_add/",
    14             type: "get",
    15             data: {"i1": i1, "i2": i2},
    16             success: function (arg) {
    17                 {#alert(arg);#}
    18                 // 把返回的结果填充到 id是i3的input框中
    19                 $("#i3").val(arg)
    20             }
    21         })
    22     })
    23 </script>

    3.Ajax发送post请求

    views.py:

    1 # Ajax post请求的后端处理函数
    2 def ajax_add3(request):
    3     print(request.POST)
    4     print("-" * 120)
    5     i1 = int(request.POST.get("i1"))
    6     i2 = int(request.POST.get("i2"))
    7 
    8     ret = i1 + i2
    9     return HttpResponse(ret)

    前端代码:

     1 <input type="text" id="i1">+
     2 <input type="text" id="i2">=
     3 <input type="text" id="i3">
     4 <input type="button" value="AJAX post提交" id="b3">
     5 
     6 <script src="/static/jquery-3.3.1.js"></script>
     7 <script src="/static/setupajax.js"></script>
     8 <script>
     9     $("#b3").on("click", function () {
    10         var i1 = $("#i1").val()
    11         var i2 = $("#i2").val()
    12         // 往后端发数据
    13         $.ajax({
    14             url: "/ajax_add3/",
    15             type: "post",
    16             data: {"i1": i1, "i2": i2},
    17             success: function (arg) {
    18                 {#alert(arg);#}
    19                 // 把返回的结果填充到 id是i3的input框中
    20                 $("#i3").val(arg)
    21             }
    22         })
    23     })
    24 </script>

    4.Ajax上传文件

     1 // 上传文件示例
     2 $("#b1").click(function () {
     3     var formData = new FormData();
     4     formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
     5   formData.append("f1", $("#f1")[0].files[0]);
     6     $.ajax({
     7         url: "/upload/",
     8         type: "POST",
     9         processData: false,  // 告诉jQuery不要去处理发送的数据
    10         contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
    11         data: formData,
    12         success:function (data) {
    13             console.log(data)
    14     }
    15   })
    16 })

    5.Ajax设置csrf_token

    (1)通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送

     1 $.ajax({
     2   url: "/cookie_ajax/",
     3   type: "POST",
     4   data: {
     5     "username": "xxx",
     6     "password": 123456,
     7     // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中
     8     "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() 
     9   },
    10   success: function (data) {
    11     console.log(data)
    12   }
    13 })

    (2)通过获取返回的cookie中的字符串 放置在请求头中发送

     1 // 引入一个jquery.cookie.js插件,然后写以下代码:
     2 
     3 $.ajax({
     4   url: "/cookie_ajax/",
     5   type: "POST",
     6   // 从Cookie取csrftoken,并设置到请求头中
     7   headers: {"X-CSRFToken": $.cookie('csrftoken')},    
     8   data: {"username": "xxx", "password": 123456},
     9   success: function (data) {
    10     console.log(data);
    11   }
    12 })

    或者这样(推荐这样写):

     1 function getCookie(name) {
     2     var cookieValue = null;
     3     if (document.cookie && document.cookie !== '') {
     4         var cookies = document.cookie.split(';');
     5         for (var i = 0; i < cookies.length; i++) {
     6             var cookie = jQuery.trim(cookies[i]);
     7             // Does this cookie string begin with the name we want?
     8             if (cookie.substring(0, name.length + 1) === (name + '=')) {
     9                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    10                 break;
    11             }
    12         }
    13     }
    14     return cookieValue;
    15 }
    16 
    17 // 在cookie中获取csrftoken
    18 var csrftoken = getCookie('csrftoken');
    19 
    20 function csrfSafeMethod(method) {
    21   // these HTTP methods do not require CSRF protection
    22   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    23 }
    24 
    25 // 为每次Ajax请求之前执行该函数
    26 // 只要在使用Ajax的地方之前导入即可
    27 $.ajaxSetup({
    28   beforeSend: function (xhr, settings) {
    29     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
    30       xhr.setRequestHeader("X-CSRFToken", csrftoken);
    31     }
    32   }
    33 });

    注:

    如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。

    如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。

    这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie:

    1 django.views.decorators.csrf import ensure_csrf_cookie
    2 
    3 @ensure_csrf_cookie
    4 def login(request):
    5     pass

    6.django序列化

    (1)什么是序列化

    序列化:将字符串转换成json格式的数据便于后端将数据发送给前端处理

    (2)django序列化

    使用django内置的serializers进行序列化:

    1 from django.core import serializers
    2 
    3 def books_json(request):
    4     book_list = models.Book.objects.all()[0:10]
    5     ret = serializers.serialize("json", book_list)
    6     return HttpResponse(ret)
  • 相关阅读:
    稳扎稳打Silverlight(68) 5.0 XNA 之绘制 3D 图形
    稳扎稳打Silverlight(65) 5.0绑定之通过 ICustomTypeProvider 绑定动态生成的属性
    千呼万唤 HTML 5 (4) 文本语义元素
    千呼万唤 HTML 5 (8) 画布(canvas)之绘制图形
    稳扎稳打Silverlight(66) 5.0其它之自定义 XAML 扩展标记, 通过 XNA 处理声音效果, 支持矢量打印, 统计连击的次数
    千呼万唤 HTML 5 (9) 画布(canvas)之承载媒体
    梦想成真 XNA (2) 绘制精灵,绘制文字
    千呼万唤 HTML 5 (6) 表单元素之 input 元素
    梦想成真 XNA (10) 3D 模型的碰撞检测
    稳扎稳打Silverlight(64) 5.0绑定之 Style 中的 Setter 支持绑定, 绑定父级链上的元素, 隐式指定数据模板, UI 上数据更新的触发方式
  • 原文地址:https://www.cnblogs.com/wyb666/p/9688670.html
Copyright © 2011-2022 走看看