基于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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序webSocket的使用方法
Feb 20 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
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python3匿名函数用法示例
2018/07/25 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
伊琍体标语
2014/06/25 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书