SpringMVC绑定json数据

最新推荐文章于 2024-06-29 07:42:45 发布

qwxx.

最新推荐文章于 2024-06-29 07:42:45 发布

阅读量611

点赞数

分类专栏： JavaWeb学习

本文链接：https://blog.youkuaiyun.com/qq_42906423/article/details/108028133

版权

JavaWeb学习专栏收录该内容

13 篇文章

订阅专栏

SpringMVC绑定json数据

1、单个参数传参

1、新建一个concatList.jsp，用于验证ajax传递和接收。

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<script type="text/javascript" src="<%=path%>/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"> 
$(function(){ 
$("#cardNo").blur(function() { 
var cardNo = $("#cardNo").val(); 
var args = {cardNo : cardNo} 
$.ajax({ 
                url :  '<%=path%>/ajax/checkCardNo',
				type : 'post',
				data : args,
				success : function(data) {
					alert(data.cardNo + ':' + data.name);
				},
				error : function() {
					alert("程序出错，请联系管理员");
				}
			});
		});
	});
</script>
</head>
<body>
	<form action="" method="post" id="form1">
		身份证：<input type="text" name="cardNo" id="cardNo" />
		 <label id="cardError"></label><br>
	    姓名： <input type="text" name="name" id="name" /><br> 
	    性别：<input type="text" name="sex" id="sex" /><br>
		年龄：<input type="text" name="age" id="age" /><br> 
		电话：<input type="text" name="tel" id="tel" /><br> 
		<input type="button" id="button" value="添加">
	</form>
</body>
</html>

2、在controller类控制器中添加方法checkCard方法，用于接收前端信息，并验证，返回结果。

package com.isoftstone.controller; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.ResponseBody; 
import com.isoftstone.entity.Concat; 
@Controller 
@RequestMapping("ajax") 
public class AjaxController { 
@RequestMapping("toConcat") 
public String toConcat() { 
return "concatList"; 
} 
@RequestMapping("checkCardNo") 
@ResponseBody 
public Concat checkCard(String cardNo) { 
System.out.println(cardNo); 
// 此处做业务处理，并返回Concat对象 
// 测试时，假设可以查询出结果，手动创建一条记录。 
Concat concat = new Concat(); 
concat.setCardNo(cardNo); 
concat.setName("张三"); 
concat.setAge(20); 
concat.setSex(true); 
concat.setTel("1323345632"); 
return concat; 
} 
}

3、添加Concat的Model类。

package com.isoftstone.entity;

public class Concat {
	private String cardNo;
	private String name;
	private boolean sex;
	private Integer age;
	private String tel;

	public String getCardNo() {
		return cardNo;
	}

	public void setCardNo(String cardNo) {
		this.cardNo = cardNo;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public boolean isSex() {
		return sex;
	}

	public void setSex(boolean sex) {
		this.sex = sex;
	}

	public Integer getAge() {
		return age;
	}

	public void setAge(Integer age) {
		this.age = age;
	}

	public String getTel() {
		return tel;
	}

	public void setTel(String tel) {
		this.tel = tel;
	}
}

4、输入网址：http://localhost:8080/项目名/ajax/toConcat
在这里插入图片描述
返回单个参数的情况：需要修改方法的返回类型和接收的单个参数。
方法修改如下：

@RequestMapping("checkCardNo") 
	@ResponseBody 
	public boolean checkCard(String cardNo) 
	{ // 业务逻辑，返回true或者false，代表能不能查到数据
		// 能查到，说明存在，否则不存在
		Boolean flag =(cardNo!=null); 
		return flag; 
		 
	}

页面ajax返回data信息修改如下：

$.ajax({ 
                url :  '<%=path%>/ajax/checkCardNo',
				type : 'post',
				data : args,
				success : function(data) {
					$("#cardError").text("乘车人已存在");
				},
				error : function() {
					alert("程序出错，请联系管理员");
				}
			});
		});

返回list多条数据的情况：需要修改方法的返回类型和接收的list信息。
方法修改如下：

@RequestMapping("checkCardNo") 
@ResponseBody 
public List<Concat> checkCard(String cardNo) 
{ 
	List<Concat> list = new ArrayList<>(); 
	// 业务逻辑获取多条concat 
	// ... 
	return list; 
}

$("#cardNo").blur(function() { 
var cardNo = $("#cardNo").val(); 
var args = {cardNo : cardNo} 
$.ajax({ 
	url : '<%=path%>/ajax/checkCard',
	type : 'post', 
	data : args, 
	success : function(data){ 
		//可以接收list 
		$.each(data,function(index,result){ 
			alert(result.cardNo + ':' + result.name); 
			}); 
		},
		error : function(){ 
			alert("程序出错，请联系管理员"); 
		}	
});
});

2、Ajax提交表单信息的参数传递

表单传递信息可分为两种情况：
1、ajax中serialize() 方法可以将表单以字符串的形式传入controller，controller层接收传参对象。
concatList.jsp做表单提交时：

$("#button").click(function(){
	//ajax表单提交，返回表单数据数据
	$.ajax({
		url : '<%=path%>/ajax/saveConcat', 
		cache : false, 
		data : $('#form1').serialize(), 
		type : 'post',
		success:function(result){
			alert(result.cardNo + ',' + result.name);
		}
	});	
});

2、实现表单提交，返回boolean类型。做判断，alert是否成功
将对象转成json格式传入controller，要求ajax传参时必须满足以下要求：
a、ajax传参中需加入：contentType : ‘application/json; charset=utf-8’；
b、data如果为对象args={name:name,age:age}，要求名字要和参数的对象一致，转成 JSON 格式：data: JSON .stringify(args)；
c、controller参数需加入@RequestBody 类名对象名，
如：@ResquestBody Concat concat。
具体代码如下：
concatList.jsp做表单提交时：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


$(function(){ 
$('#button').click(function(){ 
var name = $('#name').val(); 
var age = $('#age').val(); 
var args = {name:name, age:age} 
$.ajax({ 
url:'<%=path%>/ajax/saveConcat', 
cache : false, 
contentType : 'application/json; charset=utf-8', 
data : JSON.stringify(args), 
type : 'post', 
success : function(result) { 
alert(result); 
} 
}); 
}); 
});

Controller接收表单的方法：

@RequestMapping("saveConcat") 
@ResponseBody 
public Boolean saveConcat(@RequestBody Concat concat) { 
Boolean flag =(concat!=null); 
return flag; 
}