Python Django 進(jìn)階之AJAX（Python是什么意思）

AJAX準(zhǔn)備知識(shí)：JSON

什么是 JSON ？

JSON 指的是 JavaScript 對(duì)象表示法（JavaScript?Object?Notation）

JSON 是輕量級(jí)的文本數(shù)據(jù)交換格式

JSON 獨(dú)立于語言?*

JSON 具有自我描述性，更易理解

*?JSON 使用 JavaScript 語法來描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語言和平臺(tái)。JSON 解析器和 JSON 庫(kù)支持許多不同的編程語言。

合格的json對(duì)象：

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

不合格的json對(duì)象：

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

stringify與parse方法

JavaScript中關(guān)于JSON對(duì)象和字符串轉(zhuǎn)換的兩個(gè)方法：

JSON.parse(): 用于將一個(gè) JSON 字符串轉(zhuǎn)換為 JavaScript 對(duì)象

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

JSON.stringify(): 用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。

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

和XML的比較

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。

JSON 格式有兩個(gè)顯著的優(yōu)點(diǎn)：書寫簡(jiǎn)單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經(jīng)成為各大網(wǎng)站交換數(shù)據(jù)的標(biāo)準(zhǔn)格式，并被寫入ECMAScript 5，成為標(biāo)準(zhǔn)的一部分。

XML和JSON都使用結(jié)構(gòu)化方法來標(biāo)記數(shù)據(jù)，下面來做一個(gè)簡(jiǎn)單的比較。

用XML表示廣西部分市縣數(shù)據(jù)如下：

XML格式數(shù)據(jù):

????廣西 ???? ????????南寧 ???????? ????????????清秀 ????????????西鄉(xiāng)塘 ???????? ???? ???? ????????百色 ???????? ????????????凌云 ????????????樂業(yè) ????????????田東 ???????? ???? ???? ????????河池 ???????? ????????????鳳山 ????????????巴馬 ???????? ???? ???? ????????桂林 ???????? ????????????陽(yáng)朔 ???????? ????

用JSON表示如下：

JSON格式數(shù)據(jù)：

{ ????"name":?"廣西", ????"province":?[{ ????????"name":?"南寧", ????????"cities":?{ ????????????"city":?["清秀",?"西鄉(xiāng)塘"] ????????} ????},?{ ????????"name":?"百色", ????????"cities":?{ ????????????"city":?["凌云",?"樂業(yè)",?"田東"] ????????} ????},?{ ????????"name":?"河池", ????????"cities":?{ ????????????"city":?["鳳山",?"巴馬"] ????????} ????},?{ ????????"name":?"桂林", ????????"cities":?{ ????????????"city":?["陽(yáng)朔"] ????????} ????}] }

由上面的兩端代碼可以看出，JSON 簡(jiǎn)單的語法格式和清晰的層次結(jié)構(gòu)明顯要比 XML 容易閱讀，并且在數(shù)據(jù)交換方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數(shù)據(jù)所占用得帶寬。

AJAX簡(jiǎn)介

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML）。

AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。（這一特點(diǎn)給用戶的感受是在不知不覺中完成請(qǐng)求和響應(yīng)過程）

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。

同步交互：客戶端發(fā)出一個(gè)請(qǐng)求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個(gè)請(qǐng)求；

異步交互：客戶端發(fā)出一個(gè)請(qǐng)求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個(gè)請(qǐng)求。

示例

頁(yè)面輸入兩個(gè)整數(shù)，通過AJAX傳輸?shù)胶蠖擞?jì)算出結(jié)果并返回。

HTML部分代碼：

?? ?? ?? ?? + =

views.py：

def?ajax_test(request): ????user_name?=?request.POST.get("username") ????password?=?request.POST.get("password") ????print(user_name,?password) ????return?HttpResponse("OK")

$.ajax參數(shù)

data參數(shù)中的鍵值對(duì)，如果值值不為字符串，需要將其轉(zhuǎn)換成字符串類型。

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

JS實(shí)現(xiàn)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); ??????} ????}; ??};

AJAX請(qǐng)求如何設(shè)置csrf_token

方式1

通過獲取隱藏的input標(biāo)簽中的csrfmiddlewaretoken值，放置在data中發(fā)送。

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

方式2

通過獲取返回的cookie中的字符串 放置在請(qǐng)求頭中發(fā)送。

注意：需要引入一個(gè)jquery.cookie.js插件。

$.ajax({ ??url:?"/cookie_ajax/", ??type:?"POST", ??headers:?{"X-CSRFToken":?$.cookie('csrftoken')},??//?從Cookie取csrftoken，并設(shè)置到請(qǐng)求頭中 ??data:?{"username":?"Q1mi",?"password":?123456}, ??success:?function?(data)?{ ????console.log(data); ??} })

或者用自己寫一個(gè)getCookie方法：

function?getCookie(name)?{ ????var?cookieValue?=?null; ????if?(document.cookie?&&?document.cookie?!==?'')?{ ????????var?cookies?=?document.cookie.split(';'); ????????for?(var?i?=?0;?i?

每一次都這么寫太麻煩了，可以使用$.ajaxSetup()方法為ajax請(qǐng)求統(tǒng)一設(shè)置。

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可能不會(huì)設(shè)置CSRFtoken的cookie。

這個(gè)時(shí)候需要使用ensure_csrf_cookie()裝飾器強(qiáng)制設(shè)置Cookie。

django.views.decorators.csrf?import?ensure_csrf_cookie @ensure_csrf_cookie def?login(request): ????pass

更多細(xì)節(jié)詳見：Djagno官方文檔中關(guān)于CSRF的內(nèi)容

AJAX上傳文件

XMLHttpRequest 是一個(gè)瀏覽器接口，通過它，我們可以使得 Javascript 進(jìn)行 HTTP (S) 通信。XMLHttpRequest 在現(xiàn)在瀏覽器中是一種常用的前后臺(tái)交互數(shù)據(jù)的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出來了，相對(duì)于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一個(gè)對(duì)象，利用它來提交表單、模擬表單提交，當(dāng)然最大的優(yōu)勢(shì)就是可以上傳二進(jìn)制文件。下面就具體

首先看一下formData的基本用法：FormData對(duì)象，可以把所有表單元素的name與value組成一個(gè)queryString，提交到后臺(tái)。只需要把 form 表單作為參數(shù)傳入 FormData 構(gòu)造函數(shù)即可：

介紹一下如何利用 FormData 來上傳文件。

//?上傳文件示例 $("#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不要去處理發(fā)送的數(shù)據(jù) ????contentType:?false,??//?告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭 ????data:?formData, ????success:function?(data)?{ ??????console.log(data) ????} ??}) })

或者使用

var?form?=?document.getElementById("form1"); var?fd?=?new?FormData(form);

這樣也可以直接通過ajax 的 send() 方法將 fd 發(fā)送到后臺(tái)。

注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，現(xiàn)在 低于IE10 的IE瀏覽器不支持 FormData。

練習(xí)（用戶名是否已被注冊(cè)）

功能介紹

在注冊(cè)表單中，當(dāng)用戶填寫了用戶名后，把光標(biāo)移開后，會(huì)自動(dòng)向服務(wù)器發(fā)送異步請(qǐng)求。服務(wù)器返回這個(gè)用戶名是否已經(jīng)被注冊(cè)過。

案例分析

頁(yè)面中給出注冊(cè)表單；

在username input標(biāo)簽中綁定onblur事件處理函數(shù)。

當(dāng)input標(biāo)簽失去焦點(diǎn)后獲取 username表單字段的值，向服務(wù)端發(fā)送AJAX請(qǐng)求；

django的視圖函數(shù)中處理該請(qǐng)求，獲取username值，判斷該用戶在數(shù)據(jù)庫(kù)中是否被注冊(cè)，如果被注冊(cè)了就返回“該用戶已被注冊(cè)”，否則響應(yīng)“該用戶名可以注冊(cè)”。

序列化

Django內(nèi)置的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)

補(bǔ)充一個(gè)SweetAlert插件示例

點(diǎn)擊下載Bootstrap-sweetalert項(xiàng)目。

$(".btn-danger").on("click",?function?()?{ ??swal({ ????title:?"你確定要?jiǎng)h除嗎？", ????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("刪除成功!",?"你可以準(zhǔn)備跑路了！",?"success"); ??????????}?else?{ ????????????swal("刪除失敗",?"你可以再嘗試一下！",?"error") ??????????} ????????} ??????}) ????}); })

機(jī)器學(xué)習(xí) 云計(jì)算 Python IoT 軟件開發(fā)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。