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/"    //页面跳转
                        }
                    });
                });
        });