AJAX小示例

Posted 2022-06-06 zengyi1995

一、 基本内容

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>