django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios
前端使用的是vue，下面是axios的主要代碼
methods: {
search: function () {
var params = {
content1: this.content1
}
this.$axios.post("http://127.0.0.1:8000/search/", params)
.then((response)=> {
console.log(response);
this.response1=response.data['content1']
})
.catch(function (error) {
console.log(error);
})
},
find: function () {
this.$axios.get("http://127.0.0.1:8000/find/", {
params: {
content2: this.content2
}
})
.then((response)=> {
console.log(response);
this.response2=response.data['content2']
})
.catch(function (error) {
console.log(error);
})
},
},
后端是django框架，代碼如下
@csrf_exempt
def search(request):
post_content = json.loads(request.body, encoding='utf-8')['content1']
print(type(post_content))
print("post_content是：")
print(post_content)
return JsonResponse({'content1': 'post請(qǐng)求' + post_content * 2, 'msg': '錯(cuò)誤信息'})
@csrf_exempt
def find(request):
find_content = request.GET.get('content2')
print("find_content是：")
print(type(find_content))
print(find_content)
return JsonResponse({'content2': 'get請(qǐng)求' + find_content * 3})
這里主要是新手對(duì)axios和前后端分離開發(fā)的學(xué)習(xí)
補(bǔ)充知識(shí)：ajax在后端獲取不到請(qǐng)求參數(shù)，但是前端已經(jīng)傳遞過去了
使用ajax如果使用的是post方式提交數(shù)據(jù)，如果不設(shè)置content-type為application/x-www-form-urlencoded的話，默認(rèn)的模式text/plain；charset=utf-8。
在tomcat中對(duì)于post提交方式又做了特殊的處理如果提交方式為post而content-type又不等于application/x-www-form-urlencoded，在tomcat底層是不會(huì)去解析請(qǐng)求參數(shù)的，也不會(huì)放到requestparameter的map中，因此使用request.getParameter(name)也就獲取不到請(qǐng)求的參數(shù)了。
在瀏覽器中network中，一般post提交方式提交的數(shù)據(jù)也是會(huì)顯示在form date下，而不是request payload下。
以上這篇django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題,主要針對(duì)是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請(qǐng)求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過濾，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
vue+element實(shí)現(xiàn)表格新增、編輯、刪除功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)表格新增、編輯、刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了為什么推薦使用JSX開發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
VUE+axios+php實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了VUE+axios+php實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vant組件庫之tag漸變色不起作用的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對(duì)這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
這篇文章交詳細(xì)的給大家介紹了vue組件中slot的用法，主要是讓組件的可擴(kuò)展性更強(qiáng)，具體內(nèi)容詳情大家參考下本文2018-01-01
vue3項(xiàng)目啟動(dòng)自動(dòng)打開瀏覽器以及server配置過程
這篇文章主要介紹了vue3項(xiàng)目啟動(dòng)自動(dòng)打開瀏覽器以及server配置過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03