基于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 Eval 函数使用
Mar 23 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
js中小数转换整数的方法
Jan 26 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 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
3.从实例开始
2006/10/09 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
JavaScript实现手风琴效果
2021/02/18 Javascript
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
详解Python:面向对象编程
2019/04/10 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
家长对小学生的评语
2014/01/28 职场文书
园林系毕业生求职信
2014/06/23 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
售后服务质量承诺书
2015/04/29 职场文书
春季运动会加油词
2015/07/18 职场文书