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

谁践踏了优雅 2023-07-05 13:09 3阅读 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
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2aGFvZ3Vhbmcw_size_16_color_FFFFFF_t_70]

*  后端也做一些修改 与 前端对应

//加入 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 解决了 发送数据 多出=问题。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2aGFvZ3Vhbmcw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200215115226449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2aGFvZ3Vhbmcw,size_16,color_FFFFFF,t_70