1、AJAX簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
AJAX 不是新的編程語言，而是一種使用現有標准的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
- 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
- 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。
1.1、AJAX常見應用場景
搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。
還有一個很重要的應用場景就是注冊時候的用戶名的查重。
其實這里就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，然后服務器會把查詢到的結果響應給瀏覽器，最后再把后端返回的結果展示出來。
- 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！
1.2、AJAX的優缺點
優點：
- AJAX使用JavaScript技術向服務器發送異步請求；
- AJAX請求無須刷新整個頁面；
- 因為服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以AJAX性能高；
缺點：
- 請求零碎，濫用對服務器壓力大
2、JSON
2.1、JSON支持的數據類型
''' Supports the following objects and types by default: +-------------------+---------------+ | Python | JSON | +===================+===============+ | dict | object | +-------------------+---------------+ | list, tuple | array | +-------------------+---------------+ | str | string | +-------------------+---------------+ | int, float | number | +-------------------+---------------+ | True | true | +-------------------+---------------+ | False | false | +-------------------+---------------+ | None | null | +-------------------+---------------+ '''
2.2、Javascript中JSON對象與字符串的相互轉換
JSON.parse(): 用於將一個 JSON 字符串轉換為 JavaScript 對象：
JSON.parse('{"name":"Q1mi"}');
JSON.parse('{name:"Q1mi"}') ; // 錯誤
JSON.parse('[18,undefined]') ; // 錯誤
JSON.stringify(): 用於將 JavaScript 值轉換為 JSON 字符串：
JSON.stringify({"name":"Q1mi"})
3、jQuery實現的AJAX
3.1、HTML代碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ajax test</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <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> </body> </html>
3.2、視圖函數
def ajax_test(request): user_name = request.POST.get("username") password = request.POST.get("password") print(user_name, password) return HttpResponse("OK")
3.3、$.ajax參數
data參數中的鍵值對，如果值不為字符串，需要將其轉換成字符串類型。
$("#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);
}
})
})
4、JavaScript實現AJAX
var b2 = document.getElementById("b2"); b2.onclick = function () { // 原生JS var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", "/ajax_test/", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=q1mi&password=123456"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { alert(xmlHttp.responseText); } }; };
5、AJAX請求設置csrf_token
5.1、方式1
通過獲取隱藏的input標簽中的csrfmiddlewaretoken值，放置在data中發送。
var b2 = document.getElementById("b2"); b2.onclick = function () { // 原生JS var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", "/ajax_test/", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=q1mi&password=123456"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { alert(xmlHttp.responseText); } }; };
5.2、方式2
通過獲取返回的cookie中的字符串 放置在請求頭中發送。
注意：需要引入一個jquery.cookie.js插件。
var b2 = document.getElementById("b2"); b2.onclick = function () { // 原生JS var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", "/ajax_test/", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=q1mi&password=123456"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { alert(xmlHttp.responseText); } }; };
或者用自己寫一個getCookie方法：
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');
每一次都這么寫太麻煩了，可以使用$.ajaxSetup()方法為ajax請求統一設置。
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
6、AJAX上傳文件
// 上傳文件示例 $("#b3").click(function () { var formData = new FormData(); formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val()); formData.append("f1", $("#f1")[0].files[0]); $.ajax({ url: "/upload/", type: "POST", processData: false, // 告訴jQuery不要去處理發送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 data: formData, success:function (data) { console.log(data) } }) })
7、SweetAlert插件示例
$(".btn-danger").on("click", function () {
swal({
title: "你確定要刪除嗎？",
text: "刪除可就找不回來了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "刪除",
cancelButtonText: "取消",
closeOnConfirm: false
},
function () {
var deleteId = $(this).parent().parent().attr("data_id");
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.status === 1) {
swal("刪除成功!", "你可以准備跑路了！", "success");
} else {
swal("刪除失敗", "你可以再嘗試一下！", "error")
}
}
})
});
})
8、Django內置的serializers
def books_json(request): book_list = models.Book.objects.all()[0:10] from django.core import serializers ret = serializers.serialize("json", book_list) return HttpResponse(ret)