前端ajax传递json格式参数，后端springboot接收

updateById(Object obj) 当对象中的属性值为null时，不进行更新@RequestBody 问题

Noodles小飞

3447人浏览 · 2021-03-16 09:46:43

Noodles小飞 · 2021-03-16 09:46:43 发布

在做开发的过程中，前端ajax传参和后端springboot接收参数经常用到，之前老是把这些搞混，导致出现错误，也在网上查阅了很多资料，再根据自己的经验和测试，对这部分内容做了一些使用总结。后面会再慢慢补充
一、当前端传参为JSON对象

//前端传递参数为JSON对象
function test(){
	var temp ={
			id:'1',
			name:'javfck',
			unit:'集团公司'
	}
	$.ajax({
		type:'post',
		url:'/hzsh/eomc-yunx/zctzjnsc/test',
		data:temp,         //前端传递参数为JSON对象
		dataType:'JSON',   //后端返回的数据类型为JSON
		success:function(result){
			console.log(result)
		}
	});
}

      //1、后端使用request接收
        @ResponseBody
		@RequestMapping("/zctzjnsc/test")
		public String testParam(HttpServletRequest request) {
			String id = request.getParameter("id");
			String name = request.getParameter("name");
		    String unit = request.getParameter("unit");
			System.out.println("-----------------"+name);
			
			return null;
		}



        //2、后端直接用参数名接收，参数名要和前端对应
        @ResponseBody
		@RequestMapping("/zctzjnsc/test2")
		public String testParam2(String id,String name,String unit) {
			System.out.println("-----------"+id+","+name+","+unit);
			//-----------1,javfck,集团公司
			return null;
		}	
		
		
		//3、若后端参数和前端不一样，需要做映射才能接收到，使用@RequestParam注解进行映射	
		@ResponseBody
		@RequestMapping("/zctzjnsc/test3")
public String testParam3(@RequestParam(value = "id",required = false) String sId,
				     @RequestParam(value = "name",required = false) String sName,
				 @RequestParam(value = "unit",required = false) String sUnit) {
			
			System.out.println("-----------"+sId+","+sName+","+sUnit);
			//-----------1,javfck,集团公司
			return null;
		}

二、前端传递参数为JSON字符串
当前端传参为JSON字符串时，需设置contentType : “application/json;charset=UTF-8”,
并且后端使用@RequestBody 接收前端参数

（注意：前端传json字符串，可用@ResquestBody接收,
使用参数名 String id,String name…直接接收会报错
使用HttpServletRequest接收，获取值为null；
使用@RequestParam(value=“id”,required = false)String id获取值也为null）

//前端传递JSON字符串
	function test() {
		var temp = {
			id : '1',
			name : 'javfck',
			unit : '集团公司'
		}
		$.ajax({
			type : 'post',
			url : '/hzsh/eomc-yunx/zctzjnsc/test',
			data : JSON.stringify(temp), //将JSON对象转换为JSON字符串
			contentType : "application/json;charset=UTF-8",  //设置JSON字符串格式
			dataType : 'JSON',
			success : function(result) {
				console.log(result)
			}
		});
	}

 //1、后端使用对应的对象接收参数     
 @ResponseBody
 @RequestMapping("/zctzjnsc/test")
public String testParam(@RequestBody(required = false) EomcYunxZdzcFileEntity eomcYunxZdzcFileEntity) {
			System.out.println("*************"+eomcYunxZdzcFileEntity);
//后端对象只匹配前端参数中和自身属性一样的字段进行封装************EomcYunxZdzcFileEntity(id=1, zdzcName=null, unit=集团公司, date=null, describe=null, attachs=null)
			return null;
		}



//后端使用Map<K,V>进行接收
 @ResponseBody
 @RequestMapping("/zctzjnsc/test2")
public String testParam2(@RequestBody(required = false) MAP<String,Object> map) {
			String id = map.get("id);
			String name = map.get("name");
			String unit = map.get("unit");

			return null;
		}

三、前端ajax传参为json数组


//前端代码：
function test() {
		var temp =[
				{id:"1213",name:"rose",age:"20"},
				{id:"23423",name:"jack",age:"34"},
				{id:"45645",name:"messi",age:"26"}
			]
		$.ajax({
			type:'post',
			url:'/front/testJsonEntityArr',
			data:JSON.stringify(temp),
			contentType: "application/json;charset=UTF-8",
			dataType:'json',
			success:function(result){
				console.log(JSON.stringify(result));
			}
		})
	}
	
//1、后端用数组类型接收：
   @ResponseBody
    @RequestMapping("/testJsonEntityArr")
    public String testAjax03(@RequestBody(required = false)Student[] studentArr) {
        for(Student s:studentArr){

            System.out.println(s);
        }
        return null;
    }
    
//2、后端用集合接收参数
   @ResponseBody
    @RequestMapping("/testJsonEntityList")
    public String testAjax031(@RequestBody(required = false)List<Student> studentList) {
        for(Student s:studentList){

            System.out.println("---------"+s);
        }
        return null;
    }

四、前端传参为嵌套json数据，和传普通json数据一样

//1、当参数为嵌套json字符串时，后端使用@RequestBody的接收方式进行接收
function test() {
	var temp ={
			   id:"001",
		       data:{id:"23423",name:"jack",age:"34"},
		       remark:"这是一个json数据"
	        }
		$.ajax({
			type:'post',
			url:'/front/testJsonComplex',
			data:JSON.stringify(temp),
			contentType: "application/json;charset=UTF-8",
			dataType:'json',
			success:function(result){
				console.log(JSON.stringify(result));
			}
		})
	}

  @ResponseBody
    @RequestMapping("/testJsonComplex")
    public String testAjax04(@RequestBody(required = false)Map<String,Object> map) {
        System.out.println(map.get("id")+","+map.get("data")+","+map.get("remark"));
        return null;
    }
//输出：001,{"id":"23423","name":"jack","age":"34"},这是一个json数据



//2、当参数为嵌套json对象时，需要先将内部的json对象转换为json字符串

function test() {
	    var data = {id:"23423",name:"jack",age:"34"}
		var temp ={
			id:"001",
			data:JSON.stringify(data),
			remark:"这是一个json数据"
		}
		//或者这样：
         /*var temp ={
			id:"001",
			data:'{id:"23423",name:"jack",age:"34"}',
			remark:"这是一个json数据"
		}*/
		$.ajax({
			type:'post',
			url:'/front/testJsonComplex',
			data:JSON.stringify(temp),
			contentType: "application/json;charset=UTF-8",
			dataType:'json',
			success:function(result){
				console.log(JSON.stringify(result));
			}
		})
	}
	
    @ResponseBody
    @RequestMapping("/testJsonComplex")
    public String testAjax04(String id,String data,String remark) {
        System.out.println(id+","+data+","+remark);
        return null;
    }
输出：001,{"id":"23423","name":"jack","age":"34"},这是一个json数据

五、前端ajax发送GET请求

//测试方法
	function test() {
		var name = 'jack'
		$.ajax({
			type : 'GET',
			url : '/hzsh/eomc-yunx/zctzjnsc/test5?name='+name,
			dataType : 'JSON',
			success : function(result) {
				console.log(result)
			}
		});
	} 

或者
function test() {
		$.ajax({
			type : 'GET',
			url : '/hzsh/eomc-yunx/zctzjnsc/test5',
			data : 'name=tom',
			dataType : 'JSON',
			success : function(result) {
				console.log(result)
			}
		});
	} 
或者
 //测试方法
	function test() {
		var name = 'jack'
		var age = '23'
		$.ajax({
			type : 'GET',
			url : '/hzsh/eomc-yunx/zctzjnsc/test5',
			data : 'name='+name+'&age='+age,
			dataType : 'JSON',
			success : function(result) {
				console.log(result)
			}
		});
	}

后端：

        @ResponseBody
		@RequestMapping("/zctzjnsc/test4")
		public String testParam3(HttpServletRequest request) {
			String name  = request.getParameter("name");
		    //String age  = request.getParameter("age");
			System.out.println(name);
			return null;
			
		}
		
或者
		@ResponseBody
		@RequestMapping("/zctzjnsc/test5")
		public String testParam4(String name,String age) {
         //若参数名不一致，使用@RequestParam注解：将请求参数绑定到控制器的方法参数上
			System.out.println(name);
			return null;
			
		}