AJAX

一  概述

AJAX（Asynchronous Javascript And XML），使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML，目前以json為主）。

應用場景：

注冊時候的用戶名的查重；

搜索引擎根據輸入的關鍵字，自動提示檢索關鍵字：當文件框發生了輸入變化，使用AJAX向服務器發送一個請求，然后服務器會把查詢到的結果響應給瀏覽器，最后再把后端返回的結果展示出來，

• 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
• 當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！

二   json基礎

合格的json對象：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]　

 不合格的json對象：

{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號
[32, 64, 128, 0xFFF] // 不能使用十六進制值
{ "name": "張三", "age": undefined }  // 不能使用undefined
{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函數和日期對象
}

1.  stringify與parse方法

JSON.parse(): 用於將一個 JSON 字符串轉換為 JavaScript 對象　

JSON.parse('{"name":"Q1mi"}');
JSON.parse('{name:"Q1mi"}') ;   // 錯誤
JSON.parse('[18,undefined]') ;   // 錯誤

JSON.stringify(): 用於將 JavaScript 值轉換為 JSON 字符串。　

JSON.stringify({"name":"Q1mi"})

三  jQuery實現的AJAX

        //ajax驗證是否重名
        $("#author_input1").blur(function () {
            var _this = $(this);
            $.ajax({
                url: "/mainapp/author_name/",
                type: "POST",
                data: {name: _this.val()，
　　　　　　　　　　　　　},
                success: function (data) {
                    _this.next().text(data);
                    _this.parent().addClass('has-error');
                }
            })
        })

1.  json格式轉換

$("#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);
      }
    })
  })

views向http傳遞參數

import json
from django.http import JsonResponse

四 AJAX請求設置csrf_token

1. 方式一

通過獲取隱藏的input標簽中的csrfmiddlewaretoken值

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Q1mi",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
  },

  success: function (data) {
    console.log(data);
  }
})

或者：

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken":$("[name = 'csrfmiddlewaretoken']").val(),  // 從Cookie取csrftoken，並設置到請求頭中

  data: {"username": "Q1mi", "password": 123456},
  success: function (data) {
    console.log(data);
  }
} 

2. 全局設置

在static新建一文件，在母版中導入script

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);
        }
    }
});

注意：

從cookie中取csrftoken時，需要確保cookie存在csrftoken值。如果HTML文件中沒有包含 {% csrf_token %}，Django可能不會設置CSRFtoken的cookie。

這個時候需要使用ensure_csrf_cookie()裝飾器強制設置Cookie。

django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass

五  ajax跳轉

        //刪除數據提示框
        $('button[name="delete_button"]').click(function () {
           var _this = $(this); //隨時監測$(this)的具體值
            swal({
                    title: "確認刪除?",
                    text: "刪除后數據不可恢復!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false
                },
                function () {
                    console.log(_this);
                    $.ajax({
                        url: "/mainapp/author_delete/",
                        type: "POST",
                        data: {id: _this.parent().next().text()},
                        success: function (data) { 
                            window.location.href = "/mainapp/author/"    //頁面跳轉
                        }
                    });
                });
        });