快捷導(dǎo)航

基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題

更新時(shí)間：2018年03月05日 15:16:43 作者：0day__

下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

好，下面上貨。

1、安裝axios

npm install axios --save

2、添加axios組件

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = 'http://localhost:7878/zkview';
Vue.prototype.$ajax = axios;

3、get請(qǐng)求

testGet: function () {
 this.$ajax({
  method: 'get',
  url: '/test/greeting',
  params: {
   firstName: 'Fred',
   lastName: 'Flintstone'
  }
 }).then(function (response) {
  console.log(response);
 }).catch(function (error) {
  console.log(error);
 });
},

4、post請(qǐng)求

testPost: function () {
    var params = new URLSearchParams();
    params.append('name', 'hello jdmc你好');
    params.append('id', '2');
    this.$ajax({
     method: 'post',
     url: '/test/greeting2',
     data:params
//     data: {id: '3', name: 'abc'}
    }).then(function (response) {
     console.log(response);
    }).catch(function (error) {
     console.log(error);
    })
   }

5、運(yùn)行結(jié)果：

6、注意：

在使用post方式的時(shí)候傳遞參數(shù)有兩種方式，一種是普通方式，一種是json方式，如果后臺(tái)接受的是普通方式，那么使用上述方式即可。

普通的formed方式

var params = new URLSearchParams();
params.append('name', 'hello jdmc你好');
params.append('id', '2');
data:params

后臺(tái)接收參數(shù)：

public Student greeting2(int id,String name) {

json方式

data: {id: '3', name: 'abc'}

后臺(tái)接收參數(shù)

public Object greeting2(@RequestBody Object student) {

以上這篇基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue單頁(yè)面應(yīng)用做預(yù)渲染的方法實(shí)例
vue是一個(gè)單頁(yè)面的應(yīng)用,這導(dǎo)致一些爬蟲(chóng)和百度無(wú)法搜索到,如果你想針對(duì)你應(yīng)用的其中某些頁(yè)面進(jìn)行SEO優(yōu)化,讓他們可以被爬蟲(chóng)和百度搜索到,你可以進(jìn)行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下
2021-10-10
Vue3的路由守衛(wèi)以及登錄狀態(tài)儲(chǔ)存過(guò)程
這篇文章主要介紹了Vue3的路由守衛(wèi)以及登錄狀態(tài)儲(chǔ)存過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue組件層級(jí)關(guān)系詳細(xì)分析
這篇文章主要介紹了Vue組件的層級(jí)關(guān)系，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue-router的使用和出現(xiàn)空白頁(yè),路由對(duì)象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁(yè),路由對(duì)象屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式
這篇文章主要介紹了vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue v-bind動(dòng)態(tài)綁定class實(shí)例方法
在本篇文章里小編給大家分享的是一篇關(guān)于Vue—v-bind動(dòng)態(tài)綁定class的知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以參考下。
2020-01-01
vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
這篇文章主要介紹了vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解vue配置后臺(tái)接口方式
這篇文章主要介紹了vue配置后臺(tái)接口方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue之TodoList案例詳解
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>
2021-11-11
使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
本篇文章主要介紹了使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12