前端使用Ajax发送post请求json数据到后端SpringBoot,数据多出一个 等号 "="

1 篇文章 0 订阅

今天在做开发的过程中,遇到一个Bug,在此记录下来。流程:前端使用Ajax发送post 请求到后端SpringBoot,后端接受到数据之后发现多了一个 = ,查阅各种资料,排查问题,最终解决了问题,操作步骤如下:

  • 原前端ajax代码:
var postURL = "你的URL地址";
$.ajax({
    url: postURL,
    data:encodeURIComponent(JSON.stringify(data.field)),//为了防止乱码 将json数据 编码后发送到后端
    type:"post",
    dataType:"application/json;charset=UTF-8",//设置数据格式 一定要设置 不然传输json数据 会出问题
    success:function(data){
        //do somethings
    }
  • 原后端数据接收方式
	@PostMapping(value = "/xxx")
	**//没有设置接收数据的Request的contentType 
	//默认是application/x-www-form-urlencoded;charset=UTF-8 方式接收**
    @ResponseBody
    public String xxx(@RequestBody String params){
		//do somethings
	}
  • 解决办法:
  • 前端使用Ajax发送数据设置数据的传输格式dataType,但是在发送http请求的时候contentType没有设置,默认是为application/x-www-form-urlencoded;charset=UTF-8,这种数据结构是一种 键值对 数据结构,在传输的时候将 json 当成了键 加了一个等号 值为空 所以传输到后端 会多出来一个 等号
var postURL = "你的URL地址";
$.ajax({
    url: postURL,
    data:encodeURIComponent(JSON.stringify(data.field)),//为了防止乱码 将json数据 编码后发送到后端
    type:"post",


    contentType: "application/json;charset=UTF-8", //指定请求头 contentType 即可解决




    dataType:"application/json;charset=UTF-8",//设置数据格式 一定要设置 不然传输json数据 会出问题
    success:function(data){
        //do somethings
    }

在这里插入图片描述

  • 后端也做一些修改 与 前端对应
	//加入 produce 指定接收的数据的格式    
	@PostMapping(value = "/xxx",produces = "application/json;charset=UTF-8")
    @ResponseBody
    public String xxx(@RequestBody String params){
		//do somethings
		
		//如果前端进行了编码   记得使用 URLDecoder.decode(params,"UTF-8")进行解码

	}
  • 重启项目 再次发送数据 后端成功拿到正确json 解决了 发送数据 多出=问题。
前端使用ajax发送json后端springboot的步骤如下: 1. 创建一个html页面,添加一个按钮或表单,用于触发ajax请求。 2. 在html页面引入jquery或其他ajax库,以便能够使用ajax方法发送请求。 3. 编写ajax请求代码,包括请求的URL、请求方法、请求头、请求体等参数,并指定请求成功或失败后的回调函数。 4. 在后端springboot项目创建一个controller,用于接收前端发送json数据。 5. 在controller编写方法,用于处理接收到的json数据,并返回处理结果。 6. 在springboot项目启动应用程序,并打开html页面,点击按钮或提交表单,发送ajax请求。 7. 后端springboot应用程序接收到请求后,执行对应的controller方法,处理json数据,返回处理结果。 下面是一个简单的示例代码,演示了如何使用ajax发送json后端springboot前端html代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX发送JSON数据后端Spring Boot</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>AJAX发送JSON数据后端Spring Boot</h1> <input type="button" value="发送JSON数据" onclick="sendJson()"> <script type="text/javascript"> function sendJson() { var json = { "name": "张三", "age": 18, "gender": "男" }; $.ajax({ url: "/json", type: "POST", contentType: "application/json", data: JSON.stringify(json), dataType: "json", success: function(data) { alert("处理结果:" + data.result); }, error: function() { alert("请求失败!"); } }); } </script> </body> </html> ``` 前端ajax请求代码: ``` function sendJson() { var json = { "name": "张三", "age": 18, "gender": "男" }; $.ajax({ url: "/json", type: "POST", contentType: "application/json", data: JSON.stringify(json), dataType: "json", success: function(data) { alert("处理结果:" + data.result); }, error: function() { alert("请求失败!"); } }); } ``` 后端springboot的controller代码: ``` @RestController public class JsonController { @PostMapping("/json") public Map<String, Object> handleJson(@RequestBody Map<String, Object> json) { Map<String, Object> result = new HashMap<>(); // 处理json数据 result.put("result", "处理成功"); return result; } } ``` 在这个示例前端发送一个包含name、age和gender三个属性的json数据后端springboot应用程序的/json接口。后端接收到json数据后,执行了handleJson方法,处理json数据,并返回了一个包含result属性的json数据前端收到响应后,弹出处理结果的提示框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值