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

在做开发的过程中，前端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',   //后端返回的数据类型为JSONsuccess: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;}

前端ajax传递json格式参数，后端springboot接收相关推荐

前端传一个json字符串，后端怎么接收
有时候前端会传一个json字符串到后端,我们这时候接收就比较麻烦了,我们只能用一个变量来接收,这个变量可以是构造的对象,也可以是一个map来接个人还是觉得用map接收比较方便,不需要去构造一个对象
jsp中jquery传值给Java_jsp中利用jquery+ajax在前后台之间传递json格式参数
经过一段时间的实验琢磨,终于将前后台之间的参数传递搞定了,实验所用工具myeclipse+structs1.2. 总结:容易出错的地方:1.ajax中data的格式一定要写对,这里举了两种形式,一种是 ...
ajax前端post请求json格式参数,前端js导出,参数以json格式发送post请求
//下载excel文件 downLoadFile(url: any, data: any, fileName: any) { let other=this;//other.messageService ...
SpringBoot前端Ajax以JSON格式获取后台数据
最近在用Thymeleaf做一个项目,耳边总是飘过前后端分离的话语,不得不去了解一下,在Thymeleaf里如何获取后端的json串,这里进行详细的讲解一下(困扰了我好久/哭了) 首先我们需要一个Co ...
前端Ajax以JSON格式获取后台数据
最近在用Thymeleaf做一个项目,耳边总是飘过前后端分离的话语,不得不去了解一下,在Thymeleaf里如何获取后端的json串,这里进行详细的讲解一下(困扰了我好久/哭了) 首先我们需要一个Co ...
Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers
前后端传输数据的编码格式(contentType) get请求数据就是直接放在url?后面的 url?usernmae=junjie&password=123... 可以向后端发送post请求 ...
SpringMVC绑定ajax传递json数据到pojo对象错误（400 Bad Request）
问题如标题所述,ajax向SpringMVC Controller传递JSON数据,遇到了错误"Failed to load resource: the server responded w ...
Ajax 提交json格式数据给后台
Ajax 提交json格式数据在实际的开发当中,尤其是在前后端分离的项目中,传输数据都是以json格式进行传输的,所以对于json格式数据的情求和响应的学习十分重要. 1.前端提交json格式数据 ...
使用Ajax实现简单的增删查改前端Ajax传的值，后端如何获取
实现查询和增删改一.Ajax最基本语法二.增删查改 1.查询(Get请求) 2.增删改(Post请求) 三.后台(MVC/WebForm) 1.MVC(Post请求) 2.WebForm(Post ...

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

前端ajax传递json格式参数，后端springboot接收相关推荐

最新文章

热门文章