基于vue 添加axios组件,解决post传参数为null的问题


Posted in Javascript onMarch 05, 2018

好,下面上货。

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请求

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请求

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、运行结果:

基于vue 添加axios组件,解决post传参数为null的问题

基于vue 添加axios组件,解决post传参数为null的问题

6、注意:

在使用post方式的时候传递参数有两种方式,一种是普通方式,一种是json方式,如果后台接受的是普通方式,那么使用上述方式即可。

普通的formed方式

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

后台接收参数:

public Student greeting2(int id,String name) {

json方式

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

后台接收参数

public Object greeting2(@RequestBody Object student) {

以上这篇基于vue 添加axios组件,解决post传参数为null的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 闭包
Sep 15 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
在js中修改html body的样式
Nov 11 Javascript
解决vue处理axios post请求传参的问题
Mar 05 #Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 #Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 #Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 #Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 #Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 #Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 #Javascript
You might like
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php自动载入类用法实例分析
2016/06/24 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
Vue脚手架的简单使用实例
2018/07/10 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
opencv实现图片模糊和锐化操作
2018/11/19 Python
python实现二维插值的三维显示
2018/12/17 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python多线程和多进程关系详解
2020/12/14 Python
Python实现一个论文下载器的过程
2021/01/18 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
五一家具促销方案
2014/01/10 职场文书
驾驶员岗位职责
2014/01/29 职场文书
评先进个人材料
2014/12/29 职场文书
地震慰问信
2015/02/14 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
导游词之舟山普陀山
2019/11/06 职场文书