要在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請求,具體使用哪一種可以根據實際需求和個人喜好來決定。