AJAX編寫知識:JSON
JSON是什麽？
JSON指的是JavaScript對象符號。
JSON是壹種輕量級的文本數據交換格式。
JSON是語言獨立的*
JSON是自描述的，更容易理解。
* JSON使用JavaScript語法來描述數據對象，但JSON仍然獨立於語言和平臺。JSON解析器和JSON庫支持許多不同的編程語言。
不多說了，上圖吧！
合格的json對象:
["壹"，"二"，"三"] { "壹":1，"二":2，"三":3} { "人名":["張三"，"李四"] }[ { "人名":"張三"
不合格的json對象:
{姓名:“張三”，“年齡”:32}？//屬性名必須用雙引號[32，64，128，0xFFF] //不能用十六進制值{"name ":"張三"，" age": undefined}？//undefined{ "name ":"張三"不能用。
“生日”:新日期(“Fri，2065438年8月26日+01 07:13:10 GMT”)，
" getName ":？function(){ return this . name；} ?//不能使用函數和日期對象}
Stringify和parse方法
JavaScript中JSON對象和字符串轉換的兩種方法；
JSON.parse():用於將JSON字符串轉換成JavaScript對象。
JSON . parse(' { " name ":" q 1mi " } ')；JSON . parse(' { name:" q 1mi " } ')；//錯誤json.parse ('[18，undefined]')；//錯誤
JSON.stringify():用於將JavaScript值轉換成JSON字符串。
JSON . stringify({ " name ":" q 1mi " })
與XML的比較
JSON格式是由道格拉斯·克洛克福特在2001中提出的，用來取代繁瑣的XML格式。
JSON格式有兩個明顯的優點:寫起來簡單，壹目了然；它符合JavaScript原生語法，可以由解釋引擎直接處理，無需添加解析代碼。因此，JSON很快被接受，成為各大網站交換數據的標準格式，並被寫入ECMAScript 5，成為標準的壹部分。
XML和JSON都使用結構化方法來標記數據。我們來做壹個簡單的對比。
用XML表示中國部分省市的數據如下:
& lt？xml版本="1.0 "編碼="utf-8 "？& gt& lt國家& gt
& lt名稱& gt中國；
& lt省份& gt
& lt名稱& gt黑龍江
& lt城市& gt
& lt城市& gt哈爾濱
& lt城市& gt大慶
& lt/cities & gt；
& lt/省& gt
& lt省份& gt
& lt名稱& gt廣東
& lt城市& gt
& lt城市& gt廣州
& lt城市& gt深圳
& lt城市& gt珠海；
& lt/cities & gt；
& lt/省& gt
& lt省份& gt
& lt名稱& gt臺灣省；
& lt城市& gt
& lt城市& gt臺北
& lt城市& gt高雄
& lt/cities & gt；
& lt/省& gt
& lt省份& gt
& lt名稱& gt新疆
& lt城市& gt
& lt城市& gt烏魯木齊
& lt/cities & gt；
& lt/省& gt& lt/country & gt；XML格式數據
XML格式數據
由JSON表示如下:
{
【名稱】:“中國”，
“省”:[{
【姓名】:“黑龍江”，
“城市”:{
“城市”:[“哈爾濱”、“大慶”]
}
}, {
【名稱】:“廣東”，
“城市”:{
“城市”:[“廣州”、“深圳”、“珠海”]
}
}, {
【名稱】:“臺灣省”，
“城市”:{
“城市”:[“臺北”、“高雄”]
}
}, {
【姓名】:“新疆”，
“城市”:{
“城市”:[“烏魯木齊”]
}
}]}JSON格式數據
JSON格式數據
從上面的兩端代碼可以看出，JSON簡單的語法格式和清晰的層次結構明顯比XML更容易閱讀，而且在數據交換方面，由於JSON使用的字符遠少於XML，可以大大節省傳輸數據所占用的帶寬。
AJAX簡介
Ajax(異步JavaScript和XML)翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器異步交互，傳輸的數據是XML(當然傳輸的數據不只是XML)。
AJAX不是壹種新的編程語言，而是壹種使用現有標準的新方法。
AJAX最大的優點是可以和服務器交換數據，更新部分網頁，而不需要重新加載整個頁面。(這個特性給用戶的感覺是請求和響應過程都是在不知不覺中完成的。)
AJAX不需要任何瀏覽器插件，但是需要用戶允許JavaScript在瀏覽器上執行。
同步交互:客戶端發送請求後，需要等待服務器響應後再發送第二個請求；
異步交互:客戶端發送請求後，可以不等待服務器響應就發送第二個請求。
例子
在頁面中輸入兩個整數，通過AJAX傳輸到後端，計算結果並返回。
& lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt
& ltmeta charset="UTF-8 " >
& ltmeta patible " content = " IE = edge " >
& ltmeta name = " viewport " content = " width = device-width，initial-scale=1 " >
& lttitle & gtAJAX本地刷新實例
$("#b1 ")。on("click "，函數(){
$.ajax({
？url:"/ajax_add/"，
？類型:“獲取”，
？數據:{"i1":$("#i1 ")。val()，“I2”:$(“# I2”)。val()}，
？成功:函數(數據){
$("#i3 ")。val(數據)；
？}
})
})& lt；/script & gt；& lt/body & gt；& lt/html & gt；HTML部分代碼
HTML部分代碼
def ajax_demo1(請求):
return render(request，" ajax_demo1.html ")
def ajax_add(請求):
i1 = int(請求。GET.get("i1 "))
i2 = int(請求。GET.get("i2 "))
ret = i1 + i2
返回JsonResponse(ret，safe=False)
views.py
views.py
rlpatterns = [
...
url(r'^ajax_add/'，views.ajax_add)，
url(r'^ajax_demo1/'，views.ajax_demo1)，
...？
]
urls.py
AJAX的常見應用場景
搜索引擎根據用戶輸入的關鍵詞自動提示關鍵詞。
另壹個非常重要的應用場景是註冊時的用戶名重復檢查。
其實這裏用的是AJAX技術！當文件盒的輸入發生變化時，使用AJAX技術向服務器發送請求，然後服務器將查詢結果響應給瀏覽器，最後顯示後端返回的結果。
整個過程中沒有刷新頁面，只刷新了頁面中的局部位置！
當請求發出後，瀏覽器無需等待服務器的響應就可以進行其他操作！
當輸入用戶名並將光標移動到其他表單項時，瀏覽器會使用AJAX技術向服務器發送請求，服務器會查詢是否存在名為lemontree7777777的用戶。最後，服務器返回true表示名為Lemontree 777777的用戶已經存在，瀏覽器會顯示“用戶名已註冊！”。
整個過程中，頁面沒有刷新，只是部分刷新；
請求發出後，瀏覽器無需等待服務器的響應結果就可以做其他操作；
AJAX的優點和缺點
優勢:
AJAX使用JavaScript技術向服務器發送異步請求；
AJAX請求不需要刷新整個頁面；
因為服務器響應內容不再是整個頁面，而是頁面中的壹部分內容，所以AJAX的性能很高；
jQuery實現的AJAX
jQuery發送AJAX請求的最基本的例子:
& lt！DOCTYPE html & gt& lthtml lang = " zh-CN " & gt；& lthead & gt
& ltmeta charset="UTF-8 " >
& ltmeta patible " content = " IE = edge " >
& ltmeta name = " viewport " content = " width = device-width，initial-scale=1 " >
& lttitle & gtajax測試& lt/title & gt；
& ltscript src = "/jquery/3 . 3 . 1/jquery . min . js " & gt；& lt/script & gt；& lt/head & gt；& ltbody & gt& ltbutton id="ajaxTest " >AJAX測試
$("#ajaxTest ")。單擊(函數(){
$.ajax({？url: "/ajax_test/"，？類型:“POST”，？數據:{用戶名:“Q1mi”，密碼:123456}，？成功:函數(數據){
警報(數據)
？}
})
})& lt；/script & gt；& lt/body & gt；& lt/html & gt；
views.py:
def ajax_test(request):用戶名=請求。POST.get("用戶名")password = request。POST.get("password") print(用戶名，密碼)return HttpResponse("OK ")
$.ajax參數
數據參數中的鍵值對。如果值不是字符串，則需要將其轉換為字符串類型。
def ajax_test(請求):
用戶名=請求。POST.get("用戶名")
密碼=請求。POST.get("密碼")
打印(用戶名、密碼)
返回HttpResponse("OK ")
JS實現了AJAX
var B2 = document . getelementbyid(" B2 ")；
b2.onclick = function () {
//native JS var xmlHttp = new XMLHttpRequest()；
xmlHttp.open("POST "，"/ajax_test/"，true)；
xmlhttp . setrequestheader(" Content-type "，" application/x-www-form-urlencoded ")；
xmlhttp . send(" username = q 1mi & amp；密碼= 123456”)；
xmlhttp . onreadystatechange = function(){
？if(xmlhttp . ready state = = = 4 & amp；& ampxmlHttp.status === 200) {
alert(xmlhttp . responsetext)；
？}
};
};
如何為AJAX請求設置csrf_token
模式1
通過獲取隱藏輸入標記中的csrfmiddlewaretoken值，將其放入數據中並發送。
$.ajax({？url: "/cookie_ajax/"，？類型:“POST”，？數據:{
"用戶名":" Q1mi "，
【密碼】:123456，
" csrfmiddlewaretoken ":$("[name = ' csrfmiddlewaretoken ']")。val()？//用jQuery取出csrfmiddlewaretoken的值拼接成數據？}, ?成功:函數(數據){
console.log(數據)；
}})
模式2
獲取返回的cookie中的字符串，並在請求頭中發送它。
註意:需要引入壹個jquery.cookie.js插件。
$.ajax({？url: "/cookie_ajax/"，？類型:“POST”，？頭:{"X-CSRFToken": $。cookie('csrftoken')}，？//從Cookie中取出csrftoken並設置在請求頭中？數據:{ "用戶名":" Q1mi "，"密碼":123456}，？成功:函數(數據){
console.log(數據)；
}})
或者自己寫壹個getCookie方法:
函數getCookie(name) {
var cookieValue = null
if(document . cookie & amp；& ampdocument.cookie！== '') {
var cookies = document . cookie . split('；');
for(var I = 0；我& ltcookies.lengthi++) {
var cookie = jquery . trim(cookies[I])；
//這個cookie字符串是以我們想要的名字開頭的嗎？if (cookie.substring(0，name . length+1)= =(name+' = '){
cookieValue = decodeURIComponent(cookie . substring(name . length+1))；
打破；
}
}
}
返回cookieValue} var csrftoken = get cookie(' csrftoken ')；
每次都這樣寫太麻煩了。您可以使用美元。ajaxSetup()方法對ajax請求進行統壹設置。
函數csrfSafeMethod(method) {
//這些HTTP方法不需要CSRF保護？返回(/^(GET|HEAD|OPTIONS|TRACE)$/.測試(方法))；}$.ajaxSetup({？beforeSend:函數(xhr，設置){
如果(！csrfsafe method(settings . type)& amp；& amp！this.crossDomain) {
？xhr . setrequestheader(" X-CSRFToken "，CSRFToken)；
}
}});
註意:
如果使用從cookie獲取csrftoken的方法，需要確保cookie具有csrftoken值。
如果您的視圖呈現的HTML文件不包含{% csrf_token %}，Django可能不會設置CSRFtoken的cookie。
此時，您需要使用確保_csrf_Cookie()裝飾器來強制設置Cookie。
django.views.decorators.csrf導入確保_csrf_cookie @確保_ csrf _ cookie定義登錄(請求):通過
更多詳情，請參考CSRF在Djagno的官方文件。
AJAX上傳文件
XMLHttpRequest是壹個瀏覽器接口，通過它我們可以讓Javascript與HTTP (S)進行通信。XMLHttpRequest是當前瀏覽器中與前臺和後臺數據交互的常用方式。2008年2月，XMLHttpRequest Level 2的草案被提出。與上壹代相比，它有壹些新的特性，其中FormData是XMLHttpRequest Level 2新增加的對象。用它來提交表單，模擬表單提交，最大的好處就是可以上傳二進制文件。以下具體。
首先我們來看壹下FormData的基本用法:formData對象，它可以將所有表單元素的名稱和值組合成壹個queryString並提交給後臺。只需將表單作為參數傳遞給FormData構造函數:
介紹如何使用FormData上傳文件。
django.views.decorators.csrf導入確保_ csrf _ cookie @確保_csrf_cookiedef登錄(請求):
及格
或者使用
var form = document . getelementbyid(" form 1 ")；var FD = new FormData(form)；
這樣也可以通過ajax的send()方法直接將fd發送到後臺。
註意:由於FormData是XMLHttpRequest Level 2的新接口，現在IE10以下的IE瀏覽器都不支持FormData。
練習(用戶名註冊了嗎)
功能介紹
在註冊表單中，當用戶填寫用戶名並將光標移開時，它會自動向服務器發送壹個異步請求。服務器返回該用戶名是否已註冊。
個案分析
登記表在頁面中給出；
在用戶名輸入標記中綁定onblur事件處理程序。
當輸入標簽失去焦點時，獲取用戶名表單字段的值，並向服務器發送壹個AJAX請求；
Django的view函數處理請求，獲取用戶名值，判斷用戶是否在數據庫中註冊。如果是，則返回“用戶已註冊”，否則響應“用戶名可以註冊”。
連載
Django的內置序列化器
def books_json(請求):book_list = models。book . objects . all()[0:10]from django . core導入序列化程序ret = serializer . serialize(" JSON "，book_list)返回HttpResponse(ret)
添加壹個SweetAlert插件示例。
點擊下載Bootstrap-sweetalert項目。
$(".BTN-危險”)。on("click "，函數(){
Swal({ title:“確定要刪除嗎？”，文字:“刪了就收不回來了！”，類型:“警告”，showcancelbutton: true，confirm button class:“BTN-危險”，confirmbuttontext:“刪除”，cancelButtonText:“取消”，close confirm:false。
},
函數(){
？var deleteId = $(this)。父級()。父級()。attr(" data _ id ")；
？$.ajax({ url: "/delete_book/"，類型:" post "，數據:{"id": deleteId}，成功:函數(數據){
？if (data.status === 1) {
Swal("刪除成功！"“妳可以準備跑了！”，“成功”)；
？}否則{
Swal("刪除失敗"，"妳可以再試壹次！"，“錯誤”)
？}
}
？})
});})
原文:AJAX-
作者:Q1mi-？
來自:博客花園-AJAX路線圖
AJAX教程
如果需要教程，可以留言“AJAX”，我看到後發給妳。