色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue接收form post

林子帆1年前8瀏覽0評論

要在Vue中接收form post請求,我們需要在Vue的實例中定義一個data屬性,該屬性用來存儲從后端接收到的表單數據。

data: {
formData: {}
}

在Vue中接收form post請求的方法有兩種,一種是使用axios插件,一種是使用原生的XMLHttpRequest對象。

1. 使用axios插件

首先需要安裝axios插件,可以使用npm工具進行安裝:

npm install axios --save

在Vue實例中引入axios并設置請求頭:

import axios from 'axios'
Vue.prototype.$http = axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})

這里設置了請求的baseURL和content-type為application/x-www-form-urlencoded。接下來使用axios插件向后端發送post請求,并將響應的數據存儲到Vue的data屬性中:

this.$http.post('/api/formdata', formData)
.then(response =>{
this.formData = response.data
})
.catch(error =>{
console.log(error)
})

這里向后端發送了一個post請求并傳遞formData數據,使用.then方法獲取響應數據并將其存儲到Vue的data屬性中。在.catch方法中處理錯誤信息。

2. 使用XMLHttpRequest對象

Vue中也可以使用原生的XMLHttpRequest對象來接收form post請求。首先定義一個XMLHttpRequest對象:

var xhr = new XMLHttpRequest()

設置請求頭:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

使用XMLHttpRequest對象發起post請求,并將響應的數據存儲到Vue的data屬性中:

xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status == 200) {
Vue.formData = JSON.parse(this.responseText)
}
}
xhr.open('POST', '/api/formdata', true)
xhr.send(formData)

這里使用onreadystatechange函數監聽XMLHttpRequest對象的狀態變化,當狀態為4時表示傳輸完成,同時狀態碼為200表示請求成功。這里將響應數據轉化為json格式并存儲到Vue的data屬性中。

以上兩種方法都可以在Vue中接收form post請求,具體使用哪一種可以根據實際需求和個人喜好來決定。