博客

今天在做开发的过程中，遇到一个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 解决了 发送数据 多出=问题。