前端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',   //后端返回的数据类型为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;
			
		}
  • 6
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 SpringBoot 提供的 RESTful API 实现前后端文本传递和修改。具体步骤如下: 1. 在前端编写一个表单,用户可以在表单中输入文本,并提交到后端。 2. 在后端使用 SpringBoot 框架编写一个 RestController,接收前端来的文本。可以使用 @PostMapping 注解来实现接收前端 POST 请求。 3. 在 RestController 中对接收到的文本进行修改。可以使用 Java 提供的 String 类中的方法来实现对文本的修改。 4. 将修改后的文本返回给前端。可以使用 @ResponseBody 注解将修改后的文本转换成 JSON 格式返回给前端。 示例代码如下: 前端代码: ```html <form id="myForm"> <label for="text">请输入文本:</label> <input type="text" id="text" name="text"> <button type="submit">提交</button> </form> <script> $(document).ready(function() { $("#myForm").submit(function(event) { event.preventDefault(); var formData = { "text": $("#text").val() }; $.ajax({ type: "POST", url: "/api/modifyText", data: JSON.stringify(formData), contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { alert(data.text); }, error: function(error) { alert("出错了:" + error.responseText); } }); }); }); </script> ``` 后端代码: ```java @RestController @RequestMapping("/api") public class MyController { @PostMapping("/modifyText") public Map<String, String> modifyText(@RequestBody Map<String, String> input) { String text = input.get("text"); // 对文本进行修改,例如将小写字母转换成大写字母 String modifiedText = text.toUpperCase(); Map<String, String> output = new HashMap<>(); output.put("text", modifiedText); return output; } } ``` 当用户在前端输入文本并提交后,后端会将文本转换成大写字母,并将修改后的文本返回给前端前端会弹出一个对话框显示修改后的文本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值