1、ajax的含義
Ajax全稱“Async Javascript And XML”即:異步的javascript和XML。它是一種稱謂,并不指代某項(xiàng)具體的技術(shù),準(zhǔn)確來(lái)說(shuō)是一系列技術(shù)的集合.現(xiàn)在,所有的無(wú)刷新操作都被稱為“Ajax”.
2、使用ajax的好處:
使用ajax避免了整頁(yè)數(shù)據(jù)的刷新,也減少了請(qǐng)求等待的時(shí)間,提高了用戶體驗(yàn).
假設(shè)有如下表單,需要將這些表單用ajax傳參的方式傳給后臺(tái),該怎么做呢…
我們知道ajax傳參的格式為$.post(“地址”,參數(shù),function(返回值){}),套用這個(gè)格式進(jìn)行傳參,有以下兩種方法:
方法一:提交表單中的部分字段
我們可以獲取用戶名,密碼等內(nèi)容,將其拼接成一個(gè)字典(想傳什么就將其拼接成字典格式,沒(méi)有特殊限制,你甚至可以單獨(dú)的只傳一個(gè)用戶名),將其作為參數(shù)傳給后臺(tái)
例:
{‘username':username,‘password':password,‘csrfmiddlewaretoken':csrf}
或
{‘username':username‘}
或
{‘password':password}
關(guān)于csrf是預(yù)防跨站攻擊的內(nèi)容,你可以移步djanjo之csrf防跨站攻擊作下了解
接下來(lái)看看代碼中是如何實(shí)現(xiàn)的,重點(diǎn)關(guān)注帶有下方標(biāo)記的代碼
{# 🌈ajax #}
{# 🌈post提交 #}
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>注冊(cè)/title> {# 引用jquery #} script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js">/script> /head> body> form ation="" method="post"> {# 防止跨站攻擊 #} {% csrf_token %} 用戶名:input type="text" name="username">br> 密碼:input type="text" name="password">br> !-- {# 表單提交 #}--> !-- input type="submit">--> !-- {# ajax提交 #}--> input type="button" value="注冊(cè)" id="button"> /form> /body> /html> script> {# 🌈ajax #} $("#button").click(function(){ username = $("[name='username']").val(); password = $("[name='password']").val(); csrf = $("[type='hidden']").val(); console.log(username,password,csrf); {# 🌈post提交 #} {# $.post("地址",{參數(shù)},function(返回值){}) #} $.post("/user/register/",{'username':username,'password':password,'csrfmiddlewaretoken':csrf},function(data){ console.log(data) }) }); /script>
方法二:提交表單中的所有字段
console.log($(“form”).serialize()
serialize是把表單中的字段序列化,弄成get的請(qǐng)求的字符串格式,將其作為參數(shù)傳給后臺(tái)
值得注意的是這里就不能像方法一里那樣想傳什么參數(shù)就傳什么參數(shù)了,而是表單中所有的字段都會(huì)被納為請(qǐng)求的字符串格式
接下來(lái)看看代碼中是如何實(shí)現(xiàn)的,重點(diǎn)關(guān)注帶有下方標(biāo)記的代碼
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>注冊(cè)/title> {# 引用jquery #} script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js">/script> /head> body> form ation="" method="post"> {# 防止跨站攻擊 #} {% csrf_token %} 用戶名:input type="text" name="username">br> 密碼:input type="text" name="password">br> !-- {# 表單提交 #}--> !-- input type="submit">--> !-- {# ajax提交 #}--> input type="button" value="注冊(cè)" id="button"> /form> /body> /html> script> {# 🌈ajax #} $("#button").click(function(){ console.log($("form").serialize()); {# 🌈post提交 #} {# $.post("地址",{參數(shù)},function(返回值){}) #} $.post("/user/register/",console.log($("form").serialize()),function(data){ console.log(data) }) }); /script>
到此這篇關(guān)于django學(xué)習(xí)之a(chǎn)jax post傳參的文章就介紹到這了,更多相關(guān)django之a(chǎn)jax post傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
標(biāo)簽:黔西 黑龍江 鷹潭 惠州 四川 上海 益陽(yáng) 常德
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《django學(xué)習(xí)之a(chǎn)jax post傳參的2種格式實(shí)例》,本文關(guān)鍵詞 django,學(xué),習(xí)之,ajax,post,傳參,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。