Vue+SpringBoot 前后台JSON 交互（亲测踩坑）

最新推荐文章于 2025-04-01 13:46:33 发布

Java程序之猿

最新推荐文章于 2025-04-01 13:46:33 发布

阅读量1k

点赞数 1

分类专栏： VUE spring boot 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/JavaLLU/article/details/108137388

版权

spring boot 同时被 2 个专栏收录

15 篇文章

订阅专栏

VUE

13 篇文章

订阅专栏

本文详细介绍了前端VUE如何向后端SpringBoot发送请求，并展示了两种接收数据的方法：一是通过@RequestBody接收JSON格式的数据；二是通过HttpServletRequest解析请求体为JSON对象。这两种方式在实际开发中非常实用，帮助开发者理解前后端数据交互的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接上代码，前端VUE的请求方法

这样写在浏览器看到的参数可能有点奇怪

不要慌，服务端仍然可以接收

Springboot端代码有两种接收方式

1、通过@RequestBody 接收json

@RequestMapping(value = "/modifyInfo1", method = RequestMethod.POST)
public String get(@RequestBody Map map) {
String param1 = (String) map.get("param1");
String param2 = (String) map.get("param2");
System.out.println(param1+"----"+param2);
return param1 + ";" + param2;
}

2、通过Request获取

@ResponseBody
@RequestMapping(value = "/request/data", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public String getByRequest(HttpServletRequest request) {

    //JSONObject
    JSONObject jsonParam = this.getJSONParam(request);

    return jsonParam.toJSONString();
}

public JSONObject getJSONParam(HttpServletRequest request){
    JSONObject jsonParam = null;
    try {
        // 获取输入流
        BufferedReader streamReader = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));

        // 数据写入Stringbuilder
        StringBuilder sb = new StringBuilder();
        String line = null;
        while ((line = streamReader.readLine()) != null) {
            sb.append(line);
        }
        jsonParam = JSONObject.parseObject(sb.toString());
        System.out.println(jsonParam.toJSONString());
    } catch (Exception e) {
        e.printStackTrace();
    }
    return jsonParam;
}