Django中數(shù)據(jù)在前后端傳遞的方式之表單、JSON與ajax
前言
最近用Django寫項(xiàng)目的時(shí)候用到了數(shù)據(jù)的傳遞,一竅不通,查了點(diǎn)資料。記錄一下。水平不高,瓜不保熟。
從兩方面來(lái)說(shuō):從后端傳遞給前端頁(yè)面、以及從前端頁(yè)面的輸入數(shù)據(jù)傳給后端
先說(shuō)簡(jiǎn)單的:
1、從后端到頁(yè)面、也就是view文件到傳遞給HTML展示出來(lái)
以Django框架為例,views里有個(gè)函數(shù)叫test_view 他作為后端函數(shù)向?yàn)g覽器發(fā)送 test_view.html展示給用戶。
# /views def test_view(request): python_data = "python里的數(shù)據(jù)" return render(request, "test_view.html", {"html_data_name":python_data})
render的第三個(gè)參數(shù)就是傳進(jìn)去的數(shù)據(jù)
那么,怎么獲取呢。html 文件里:雙大括號(hào)擴(kuò)住數(shù)據(jù)名
<!--/test_view.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>數(shù)據(jù)讀?。簕{html_data_name}}</p> </body> </html>
2、從頁(yè)面到后端、也就是HTML文件到views文件
通過表單傳給后端:在HTML里建一個(gè)表單,這是一種HTML內(nèi)置的獲取、提交數(shù)據(jù)的方法。 表單里action=""
意為把數(shù)據(jù)傳給自己頁(yè)面的url
<!--/test_view.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form method="post" action=""> {% csrf_token %} <input type="text" name="html_data_to_views_name" value="Mickey"> <input type="submit" value="Submit"> </form> </body> </html>
獲取方法:request.POST.get('變量名')
# /views def test_view(request): if request.method == 'POST': data_from_html = request.POST.get('html_data_to_views_name') HttpResponse(f'views得到表單數(shù)據(jù){data_from_html}') python_data = "python里的數(shù)據(jù)" return render(request, "test_view.html", {"html_data_name":python_data})
以上代碼的修改在于增加了個(gè)判斷。判斷request.method
是否為POST
。當(dāng)表單提交的時(shí)候就會(huì)重新調(diào)用了一次test_view,并且request里包含著表單的內(nèi)容,方法為post。
這就會(huì)進(jìn)入判斷,通過request.POST.get
將request
里的數(shù)據(jù)取出。
以上這兩種有很大缺陷,每次傳遞都是一次刷新,不適用于大量數(shù)據(jù)。比如網(wǎng)頁(yè)需要根據(jù)數(shù)據(jù)實(shí)時(shí)更新畫面之類的。那就不大行了
復(fù)雜一點(diǎn)的 Ajax 與 JSON
可以簡(jiǎn)單理解為:
- Ajax 是一個(gè)不用刷新就能傳輸數(shù)據(jù)的玩意兒,而且這個(gè)玩意不是單方向的,它既能頁(yè)面?zhèn)鹘o后端,也能后端傳給頁(yè)面。而且你運(yùn)行一次他就給你傳一次。
- JSON 是一種數(shù)據(jù)格式,在python里一個(gè)字典的變量,你把它傳到HTML的JavaScript里它還像字典一樣使用。其實(shí)就是方便傳輸。
JSON
在Django中,使用JSON由后端傳輸數(shù)據(jù)給前端,有兩種方式,一種是使用Python的JSON包,一種是使用Django的JsonResponse
# views.py 發(fā)送 def test_view(request): data={ 'html_data_name': 'python_data', } # return HttpResponse(json.dumps(data)) # 會(huì)被識(shí)別為text/html應(yīng)該是: return HttpResponse(json.dumps(data), content_type='application/json') # 或return JsonResponse(data)
<!--/test_view.html 讀取--> <script> var jsondata = JSON.parse(data);//原生 </script>
同樣的也能從HTML發(fā)送給后端,只是需要放到表單里提交:
<!--/test_view.html --> <!--假設(shè)你有一個(gè)JSON數(shù)據(jù)要先把他轉(zhuǎn)為字符串 --> <script> JSONdata={'key':'value'} json_str_data = JSON.stringify(JSONdata).toString(); function get_json_str(){ var inp_id =document.getElementById("str_json_data"); inp_id.value = json_str_data } </script> <!--將字符串放到一個(gè)隱藏的表單input里,提交后就傳走了 --> <form method="post" action=""> {% csrf_token %} <input type="text" id="str_json_data" style="display:none" name="str_json_data"> <button type="submmit" onclik="get_json_str()">提交</button> </form>
# views.py 讀取 # /views def test_view(request): if request.method == 'POST': json_data = json.loads(request.body) //json讀取方式 return HttpResponse("get!") return render(request, "test_view.html", {})
這里涉及到倆概念:
「解析」:將JSON格式的字符串轉(zhuǎn)化成JSON對(duì)象(JS對(duì)象值)的過程。也稱為「反序列化」。
「序列化」:就是說(shuō)把原來(lái)是對(duì)象的類型轉(zhuǎn)換成字符串類型(或者更確切的說(shuō)是JSON字符串類型的)。
解析:將字符串變成了Obj帶有的屬性就是字符串里顯示的??梢杂命c(diǎn)號(hào)取出。
var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; var jsondata = $.parseJSON(data);//jQuery var jsondata = JSON.parse(data);//原生
序列化
var jsonstrdata = JSON.stringify(data).toString();
ajax
ajax的使用方式:
我當(dāng)時(shí)沒看懂,所以在這解釋一下里面的語(yǔ)句都是干嘛的:
<!DOCTYPE html> <html> <head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ data:{"data_send":"你想發(fā)給url的數(shù)據(jù)"} //教程里沒給url發(fā)數(shù)據(jù) url:"訪問這個(gè)url后,對(duì)應(yīng)views發(fā)過來(lái)的數(shù)據(jù)就是下面的data_get", success:function(data_get){ $("#div1").html(data_get); //用得到的數(shù)據(jù)替換掉id="div1"的div里的那句話 }}); }); }); </script> </head> <body> <div id="div1"><h2>在ajax訪問成功后將這里的數(shù)據(jù)變成ajax得到的數(shù)據(jù)</h2></div> <button>使用ajax</button> </body> </html>
整體流程就是:點(diǎn)擊按鈕->觸發(fā)了對(duì)應(yīng)函數(shù)->ajax啟動(dòng):此時(shí)ajax將data里的數(shù)據(jù)傳給了url(教程里沒傳,但可以傳)并訪問、觸發(fā)了url對(duì)應(yīng)views里的視圖(后端)、并且后端返回了數(shù)據(jù)被ajax放到了success:function()
的參數(shù)里、運(yùn)行了這個(gè)函數(shù)-> html內(nèi)容被改變。
ajax的主要字段:
- data: 傳給后端的數(shù)據(jù)
- url: 傳給哪個(gè)后端處理函數(shù)
- success:得到數(shù)據(jù)后要這些數(shù)據(jù)干啥
Ajax+json:
<!DOCTYPE html> <html> <head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var token_csrf = "{{ csrf_token }}"; //因?yàn)閐jango的form表單中都包含csrf_token,因此在用ajax傳表單數(shù)據(jù)時(shí)也要帶上 var JSON_data = { "js_data": 555 }; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", headers: { "X-CSRFToken": token_csrf }, url: "/testview", dataType: "json", data: JSON.stringify(JSON_data), //傳進(jìn)views里的數(shù)據(jù) success: function (data) { //data為地址傳過來(lái)的數(shù)據(jù) //在此對(duì)data進(jìn)行操作 } }; }); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 修改文本內(nèi)容</h2></div> <button>獲取其他內(nèi)容</button> </body> </html>
后端:
def post(self, request): data = json.loads(request.body) get_data = data["js_data"] data={ 'send_data':'send_data', } return HttpResponse(json.dumps(data),content_type="application/json") # 或者直接使用JsonResponse函數(shù) # return JsonResponse(data)
總結(jié)
到此這篇關(guān)于Django中數(shù)據(jù)在前后端傳遞的方式之表單、JSON與ajax的文章就介紹到這了,更多相關(guān)Django數(shù)據(jù)在前后端傳遞方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
python實(shí)現(xiàn)TCP文件接收發(fā)送
這篇文章主要為大家詳細(xì)介紹了python實(shí)現(xiàn)TCP文件接收發(fā)送,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09python json.loads兼容單引號(hào)數(shù)據(jù)的方法
今天小編就為大家分享一篇python json.loads兼容單引號(hào)數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-12-12pycharm中使用request和Pytest進(jìn)行接口測(cè)試的方法
這篇文章主要介紹了pycharm中使用request和Pytest進(jìn)行接口測(cè)試的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07python3實(shí)現(xiàn)指定目錄下文件sha256及文件大小統(tǒng)計(jì)
這篇文章主要為大家詳細(xì)介紹了python3實(shí)現(xiàn)指定目錄下文件sha256及文件大小統(tǒng)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02磁盤垃圾文件清理器python代碼實(shí)現(xiàn)
幾行Python代碼打造自己的磁盤垃圾文件清理器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03python字符串常用方法及文件簡(jiǎn)單讀寫的操作方法
字符串(sting)是 Python 中最常用的數(shù)據(jù)類型。我們可以使用引號(hào)('或")來(lái)創(chuàng)建字符。本文給大家介紹python字符串常用方法及文件簡(jiǎn)單讀寫的操作方法,通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-03-03利用Python實(shí)現(xiàn)手機(jī)短信監(jiān)控通知的方法
今天小編就為大家分享一篇利用Python實(shí)現(xiàn)手機(jī)短信監(jiān)控通知的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-07-07