场景/功能描述:
    最近再学习前端的框架vue,发请求使用的是axios,自己简单的写了个后端,实现一个学生列表的crud,web层使用的是springmvc,并使用jq的$.ajax方式测试过接口没问题。

出现的问题:
    已经再次确保后端接口能接收jquery的$.ajax发送的post请求,但前端使用vue,发请求通过axios来发送,后端却无法获取数据。

问题原因:
    请求的Content-Type设置为application/x-www-form-urlencoded,那么这个Post请求被认为是HTTP POST表单请求,参数出现在form data,参数形式是key=value&key1=value1这种形式,后端获取使用@RequestParam; 其他情况如使用原生AJAX的POST请求如果不指定请求头Request Header,默认使用的Content-Type是text/plain;charset=UTF-8,或者application/json ,参数出现在Request payload块,其参数形式是标准的json格式,使用@RequestParam无法获取,需要使用@RequestBody获取。
    在axios使用Post发送数据时,默认是直接把json放到请求体中提交到后端的,属于上述的第二种方式。
    
解决方案:
第一种、前端解决:添加请求头信息,并重新封装请求参数
let params = 'studentno=' + this.student.studentno +
        '&name=' + this.student.name +
        '&phone=' + this.student.phone +
        '&email=' + this.student.email
axios.post(url, params,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})    

看到这种拼接字符就觉得恶心,可以选择另外的方式:

参考文档链接:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

一下是拷贝关于参考文档中给出的方案,需要详细了解可翻阅文档。

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

Browser

In a browser, you can use the URLSearchParams API as follows:

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Note that URLSearchParams is not supported by all browsers (see caniuse.com), but there is a polyfill available (make sure to polyfill the global environment).

Alternatively, you can encode data using the qs library:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

    
第二种、后端解决:在请求参数使用@RequestBody注解替代@RequestParam
@ResponseBody
@RequestMapping(value="/save",method=RequestMethod.POST)
public Map<String, String> save(@RequestBody Student student)//自动将参数封装成student对象

代码不详细列出,仅列出关键部分。

 

Logo

前往低代码交流专区

更多推荐