码迷,mamicode.com
首页 > Web开发 > 详细

AJAX小示例

时间:2019-08-02 22:20:45      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:ensure   根据   cookie   bst   页面   substring   text   gif   渲染   

一、 基本内容

  1. 定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”,即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)

  2. 作用:AJAX就是使用 js 技术发送请求和接收响应

  3. 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容

  4. 特点:

    • 异步交互
      • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
      • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
    • 局部刷新,无须刷新整个页面
    • 传输的数据量少,性能高
  5. 应用场景:

    • 搜索引擎根据用户输入的关键字,自动提示检索关键字
    • 注册时候的用户名的查重
  6. 普通示例:页面输入两个整数,通过AJAX传输到后端计算出结果并返回

    # urls.py
    urlpatterns = [
        url(r'^ajax_add/', views.ajax_add),
        url(r'^ajax_demo1/', views.ajax_demo1),  
    ]
    # views.py
    def ajax_demo1(request):
        return render(request, "ajax_demo1.html")
    
    def ajax_add(request):
        i1 = int(request.GET.get("i1"))
        i2 = int(request.GET.get("i2"))
        ret = i1 + i2
        return JsonResponse(ret, safe=False)
    {# ajax_demo1.html #}
    <input type="text" id="i1">+
    <input type="text" id="i2">=
    <input type="text" id="i3">
    <input type="button" value="AJAX提交" id="b1">
    
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script>
        $("#b1").on("click", function () {
            $.ajax({
                url:"/ajax_add/",
                type:"GET",
                data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
                success:function (data) {
                    $("#i3").val(data);
                },
                error:function (error) {
                    console.log(error)
                },
            })
        })
    </script>

二、 jQuery实现的AJAX

  • 最基本的jQuery发送AJAX请求示例

    # views.py
    def ajax_test(request):
        user_name = request.POST.get("username")
        password = request.POST.get("password")
        print(user_name, password)
        return HttpResponse("OK")
    <button id="ajaxTest">AJAX 测试</button>
    <script>
        $("#ajaxTest").click(function () {
            $.ajax({
                url: "/ajax_test/",
                type: "POST",
                data: {username: "Q1mi", password: 123456},
                success: function (data) {
                    alert(data)
                }
            })
        })
    </script>
  • $.ajax参数

    • data参数中的键值对,如果值不为字符串,需要将其转换成字符串类型

      <script>
          $("#b1").on("click", function () {
              $.ajax({
                  url:"/ajax_add/",
                  type:"GET",
                  data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
                  success:function (data) {
                      $("#i3").val(data);
                  }
              })
          })
      </script>

三、 AJAX通过csrf的校验

  1. 前提条件:确保有csrftoken的cookie

    • 在页面中使用{% csrf_token %}
    • 加装饰器:ensure_csrf_cookie
    • 注意:
      • 如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值
      • 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。
      • 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie
  2. AJAX请求如何设置csrf_token

    • 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送
    $.ajax({
     url: "/cookie_ajax/",
     type: "POST",
     data: {
         "username": "Q1mi",
         "password": 123456,
         {# 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 #}
         "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
     },
     success: function (data) {
         console.log(data);
     }
    })
    • 通过获取返回的cookie中的字符串,放置在请求头中发送
      • 注意:需要引入一个jquery.cookie.js插件
    $.ajax({
     url: "/cookie_ajax/",
     type: "POST",
     {# 从Cookie取csrftoken,并设置到请求头中 #}
     headers: {"X-CSRFToken": $("[name = 'csrfmiddlewaretoken']").val()},
     data: {"username": "Q1mi", "password": 123456},
     success: function (data) {
         console.log(data);
     }
    })
    • 使用文件:自己写一个getCookie方法
      • 粘贴在 static 下的 js 中的 一个js文件 ,比如:ajax_setup.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]);
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    // 通过js获取csrftoken的值
    var csrftoken = getCookie('csrftoken');
    
    // 使用$.ajaxSetup()方法为ajax请求统一设置
    function csrfSafeMethod(method) {
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    
    $.ajaxSetup({
      beforeSend: function (xhr, settings) {
        // 不是 GET|HEAD|OPTIONS|TRACE 这些请求的话,就执行if后的操作
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);   // 设置请求头,本质同方法2
        }
      }
    });

四、 AJAX上传文件

  • 上传文件示例

    <input type="file" id="f1">
    <button id="b1">上传</button>
    
    <script src="/static/jquery.js"></script>
    <script>
        $('#b1').click(function () {
            var  formobj =  new FormData();
            formobj.append('file',$('#f1')[0].files[0]);
            formobj.append('name','alex');
            $.ajax({
                url: '/upload/',
                type: 'post',
                data:formobj ,
                processData:false,
                contentType:false,
                success: function (res) {
                    $("[name='i3']").val(res)
                },
            })
        })
    </script>

AJAX小示例

标签:ensure   根据   cookie   bst   页面   substring   text   gif   渲染   

原文地址:https://www.cnblogs.com/zengyi1995/p/11291417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!