Django框架詳細介紹---AJAX
一、概述
1.什麽是JSON
- JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
- JSON 是輕量級的文本數據交換格式
- JSON 獨立於語言 *
- JSON 具有自我描述性，更易理解
JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立於語言和平臺，JSON 解析器和 JSON 庫支持許多不同的編程語言
圖示：JavaScript與Python間JSON支持的數據類型以及相應轉換關系
示例：
真確的Json對象
# 字符串，列表字符串元素、字典中的索引以及字符串值必須是使用雙引號 ["zh", "man"] { "name": "zh", "gender": "man", "age": 18 }
錯誤的數寫方式以及Json不支持的對象
{ name: "zh", "age": 18} // 屬性名必須使用雙引號
["zh", 18, 0xFFF] // 不能使用十六進制值
{ "name": "zh", "age": undefined } // 不能使用undefined
{ "name": "zh",
"birthday": new Date(‘Fri, 26 Aug 2011 07:13:10 GMT
JavaScript中JSON的使用
var str = ‘{"name": "zh", "age": 18}‘ // 將JSON字符串轉化成JavaScript對象 var json_str = JSON.parse(str) // 將JavaScript對象轉化成JSON字符串 var str2 = JSON.stringify(json_str)
2.JSON和XML比較
JSON 格式於2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式，JSON 格式有兩個顯著的優點：書寫簡單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼，因此，JSON迅速被接受，已經成為各大網站交換數據的標準格式
JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，並且在數據交換方面，由於 JSON 所使用的字符要比 XML 少得多，可以大大得節約傳輸數據所占用得帶寬
<?xml version="1.0" encoding="utf-8"?> <country> <name>中國</name> <province> <name>黑龍江</name> <cities> <city>哈爾濱</city> <city>大慶</city> </cities> </province> <province> <name>廣東</name> <cities> <city>廣州</city> <city>深圳</city> <city>珠海</city> </cities> </province> <province> <name>臺灣</name> <cities> <city>臺北</city> <city>高雄</city> </cities> </province> <province> <name>新疆</name> <cities> <city>烏魯木齊</city> </cities> </province> </country>XML格式數據
{ "name": "中國", "province": [{ "name": "黑龍江", "cities": { "city": ["哈爾濱", "大慶"] } }, { "name": "廣東", "cities": { "city": ["廣州", "深圳", "珠海"] } }, { "name": "臺灣", "cities": { "city": ["臺北", "高雄"] } }, { "name": "新疆", "cities": { "city": ["烏魯木齊"] } }] }JSON格式數據
3.什麽是AJAX
AJAX（Asynchronous Javascript And XML），全稱：“異步的Javascript和XML”，即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML），它不是新的編程語言，而是一種使用現有標準的新方法
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行：
-
- 同步交互，客戶端發出一個請求後，需要等待服務器響應結束後，才能發出第二個請求
- 異步交互，客戶端發出一個請求後，無需等待服務器響應結束，就可以發出第二個請求
二、應用
1.常見應用
搜索引擎中輸入關鍵字，自動彈出提示與關鍵字相關的條目
註冊頁面，輸入註冊的用戶名時，網頁會自動將當前輸入的用戶名發送到後端進行重復性校驗
以上過程就是通過AJAX技術，監測用戶與瀏覽器交互時，通過AJAX向服務端提交交互信息，然後服務端進行結果響應等，前端再將返回的結果進行展示，但是在整個過程中頁面並沒有重新加載
2.在AJAX請求中設置csrf_token
官方文檔：
https://docs.djangoproject.com/en/1.11/ref/csrf/
方法一：獲取隱藏在input標簽中的csrfmiddlewaretoken值，並直接添加到AJAX請求的data中發送出去
$.ajax({
url: "/auth/login/",
type: "POST",
data: {
username: $("#id_username").val(),
password: $("#id_password").val(),
// 用JQuery取出csrfmiddlewaretoken的值，添加到data中
csrfmiddlewaretoken:
$("[name = ‘csrfmiddlewaretoken‘]").val(),
},
success: function (data) {
// 判斷傳過來的data字典裏的code是 0 還是 1
// 是 0 說明認證成功以及輸入的驗證碼正確
if (!data.code) {
location.href = data.data;
}
// 是 1 說明認證失敗或者輸入的驗證碼錯誤
else {
// 有錯誤
$("#login-error").text(data.data);
}
},
});
方法二：從返回的cookie中獲取csrftoken值，並該值添加到AJAX的請求頭中
強調：該方法需要調用jquery.cookie.js插件
<script src="/static/jquery.cookie.js"></script> $.ajax({ url: "/auth/login/", type: "POST", // 從cookie取csrf_token，並添加到AJAX請求頭 headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)}, data: { username: $("#id_username").val(), password: $("#id_password").val(), }, success: function (data) { // 判斷傳過來的data字典裏的code是 0 還是 1 // 是 0 說明認證成功以及輸入的驗證碼正確 if (!data.code) { location.href = data.data; } // 是 1 說明認證失敗或者輸入的驗證碼錯誤 else { // 有錯誤 $("#login-error").text(data.data); } }, });
方法三：使用$.ajaxSetup()方法統一設置AJAX請求，同時為提高頁面的可讀性可將該方法寫入js文件中直接導入
<!-- 引入Ajax文件 --> <script src="/static/setupAjax.js"></script>
js文件內容
// 自定義從cookie中獲取csrftoken的方法 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) { // 如果發送的是POST請求則設置請求頭，添加 CSRFToken if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
3.示例
登錄頁面設計，當光標停留在輸入用戶名的input框時，不斷通過AJAX向後端提交當前輸入的用戶名，後端進行校驗該用戶是否存在並返回響應
// 檢測用戶輸入的用戶名，一旦存在輸入就發送到後端校驗用戶是否存在
$("#id_username").on("input", function () {
$("#check-user").text("");
var username = $(this).val();
$.ajax({
url: "/auth/check_user/",
type: "POST",
data: {
username: username,
},
success: function (data) {
if (data.code){
// 用戶已存在
$("#check-user").text("用戶已存在");
}
}
})
});
補充知識：
1） Django內置的序列化serializers
2）SweetAler插件
https://lipis.github.io/bootstrap-sweetalert/
Django框架詳細介紹---AJAX