AJAX小示例

一、 基本內容

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>