axios发送post请求springMVC接收不到参数的解决方法

axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded。

解决方法有以下三种:

1、设置axios的默认请求头

//设置全局的
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
var instance = axios.create({}) // 这样创建出来的 只需要:
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2、使用URLSearchParams来构建参数

var params = new URLSearchParams();
params.append("username", _this.username);
params.append("password", _this.password);
axios.post("/service/login", paramsOfJson
   ).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   })

3、后台使用@requestBody接收

@PostMapping(value = "/login")
public String testLogin(@RequestBody Map dataMap)

以上这篇axios发送post请求springMVC接收不到参数的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • 解决vue处理axios post请求传参的问题
  • 基于vue 添加axios组件,解决post传参数为null的问题
  • Vue.js实战之使用Vuex + axios发送请求详解
  • vue中axios处理http发送请求的示例(Post和get)
  • 详解Vue用axios发送post请求自动set cookie
时间: 2018-03-03

解决vue处理axios post请求传参的问题

很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

Vue.js实战之使用Vuex + axios发送请求详解

前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

vue中axios处理http发送请求的示例(Post和get)

本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

详解Vue用axios发送post请求自动set cookie

vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

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

好,下面上货. 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;

vue使用axios实现文件上传进度的实时更新详解

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s

基于Vue单文件组件详解

本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

vue+element-ui+axios实现图片上传

本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples<

基于Vue中点击组件外关闭组件的实现方法

Vue定义全局点击函数,参数为点击的回调函数. Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback); } 组件挂载后监听全局的点击事件 mounted:function () { this.globalClick(this.handleClickOut); }, 隐藏元素. 取到dom节点,判断父级是否存在来判断是否需要来关闭 handleClickOut:function

vue添加axios,并且指定baseurl的方法

本文主要介绍如何在vue项目中引入axios,并且在使用的时候指定baseurl. 好,下面上货. 1.首先需要的是一个vue项目,这个可以参考以前的文章. 2.然后是npm install axios --save-dev 3.在main.js中添加如下内容: import axios from 'axios' Vue.prototype.$ajax=axios; 4.这个时候应该可以在项目中使用了,使用的方法如下: testget: function () { this.$ajax({ me

基于vue配置axios的方法步骤

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading 项目中对请求的同一化

基于Vue框架vux组件库实现上拉刷新功能

最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

基于vue的验证码组件的示例代码

最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个. 演示 分析验证码组件 分析验证码功能 随机出现的数字大小写字母 (基础功能) 不同的数字或者字母有不同的颜色 (功能优化) 不同的数字或者字母有不同的字体大写 (功能优化) 不同的数字或者字母有不同的边距 (功能优化) 不同的数字或者字母有不同的倾斜角度 (功能优化) 更多功能优化... 分析组件功能 可以设置生成验证码的长度 (基本功能) 可以设置