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和前后端分離開(kāi)發(fā)的學(xué)習(xí)
補(bǔ)充知識(shí)：ajax在后端獲取不到請(qǐng)求參數(shù)，但是前端已經(jīng)傳遞過(guò)去了
使用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?elementui?實(shí)現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
elementUI同一頁(yè)面展示多個(gè)Dialog的實(shí)現(xiàn)
這篇文章主要介紹了elementUI同一頁(yè)面展示多個(gè)Dialog的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue在 Nuxt.js 中重定向 404 頁(yè)面的方法
這篇文章主要介紹了Vue在 Nuxt.js 中重定向 404 頁(yè)面的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。接下來(lái)通過(guò)本文給大家分享Vue.js下載方式及基本概念，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解
這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項(xiàng)目框架的相關(guān)資料，對(duì)大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
本篇文章主要介紹了vue時(shí)間格式化實(shí)例代碼，這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
el-select即選擇器用于從若干個(gè)候選項(xiàng)中選擇其中一個(gè)(或者多個(gè)),在傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問(wèn)題
這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)
本篇文章主要介紹了Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09