vue 添加axios解决post传参数为null问题
本文主要参考:
https://www.npmjs.com/package/axios
http://jingyan.baidu.com/article/29697b916d6a7bab20de3cf9.html
好,下面上货。
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、运行结果:
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问题的更多相关文章
- vue 页面间使用路由传参数,刷新页面后获取不到参数的问题
情况 情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页 ...
- vue 项目重定向时需要传参数
1.在项目首页路由因需要进行传参数,例如需要重定向到:path: "/index?from=0" 2.重定向时写法如下: redirect: {path: '/index',que ...
- Vue 使用axios分片上传
Vue的界面 <input type="file"/> 上传方法 fileUpload: function () { var num = 1 var file = do ...
- Vue文件跳转$router传参数
<button @click = "func()">跳转</button> //js <script> export default{ meth ...
- unity代码添加动画,并传参数
测试界面 button一个 sprite一个 测试代码 public class BgObject : MonoBehaviour { void Start() { List<string> ...
- 如何使用vue的axios结合PHP去上传文件
我们在做表单提交的时候,往往会碰到一些表单提交的需求,那vue的axios与上传文件碰撞后不会出现什么不一样的火花吗,听我一一道来: 首先,我们需要对写一个vue的axios的表单提交,由于本人用的是 ...
- Vue axios post 传参数,后台接收不到为 null
由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理. cnmp inst ...
- Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
- axios用post传参,后端无法获取参数问题
最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const expr ...
随机推荐
- 《Effective C++》笔记:III(转载)
转自:http://www.cnblogs.com/destino74/p/3960802.html 条款5:Know what functions C++ silently writes and c ...
- Book-MySQL-Operate
创建数据库 CREATE DATABASE db_name 查看数据库 SHOW DATABASES 选择数据库 USE db_name 删除数据库 DROP DATABASE db_name 列主键 ...
- bzoj 4300: 绝世好题【dp】
设f[i][j]表示数列到i为止最后一项第j位为1的最大子序列长度,每次从i-1中1<<j&a[i]!=0的位+1转移来 然后i维是不需要的,答案直接在dp过程中去max即可 #i ...
- C# 生成 bmp 格式的图片
using System; using System.Collections.Generic; using System.Diagnostics; using System.Drawing; usin ...
- VS2013使用单元测试
一.开发环境 开发工具:VS2013 二.开发流程 1.添加一个控制台项目UnitDemo namespace UnitDemo { public class Program { static voi ...
- log4j2异步日志解读(二)AsyncLogger
前文已经讲了log4j2的AsyncAppender的实现[log4j2异步日志解读(一)AsyncAppender],今天我们看看AsyncLogger的实现. 看了这个图,应该很清楚AsyncLo ...
- Redis安全与持久化(适合小白阅读)
前言:Redis的使用越来越重要.以下仅为个人学习的点点记录.仅供参考. 一.简单的redis安全性设置 1. 生产环境的redis最好建议在redis配置文件中设置bind.配置允许指定的ip登陆r ...
- [ SPOJ RESTACK ] Restacking haybales
\(\\\) Description 给出一个环,每个位置有一个初值 \(A_i\),有一个目标值 \(B_i\),保证 \(\sum A_i=\sum B_i\) 每个位置只能把值分给隔壁的,每次分 ...
- Code Kata:大整数四则运算—乘法 javascript实现
上周练习了加减法,今天练习大整数的乘法运算. 采取的方式同样为竖式计算,每一位相乘后相加. 乘法函数: 异符号相乘时结果为负数,0乘任何数都为0 需要调用加法函数 因为输入输出的为字符串,需要去除字符 ...
- Farseer.net轻量级开源框架 入门篇:查询数据详解
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 删除数据详解 下一篇:Farseer.net轻量级开源框架 中级篇: Where条 ...