基于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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
原生js实现照片墙效果
Oct 13 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
房产销售经理职责
2013/12/20 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
初中学习计划书范文
2014/09/15 职场文书
个人委托书范本汇总
2014/10/01 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
观后感格式
2015/06/19 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android