SpringMVC（26）：简单的json数据校验示例（实现功能：使用jQuery框架的ajax()方法来实现 userCode的校验）

2018年2月11日

【0】功能：利用ajax能够异步与后台进行小数据的互传，点击按钮，建议进行对userCode的输入内容进行校验。前端：JavaScript、ajax和json；

实现：springmvc如何处理json对象?首先要使用json，需要引入处理json数据的工具jar文件，这里使用阿里巴巴的fastjson-1.2.45.jar。

【1】View层-页面显示：

      用户编码-ajax ：<input type="text" id="userCode" name="userCode" value=""/><input type="button" onclick="org()">Ajax验证</input><br>

【2】View层-Ajax处理：

<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
function org(){
	$.ajax({
		type:"GET",
		url:"ucexist.html",
		data:{userCode:$("#userCode").val()},
		dataType:"json",
		success:function(data){
			alert("data: "+data);
			if(data.userCode == "exist"){
				alert("userCode "+data.userCode+" !");
			}else{
				alert("userCode accessible!");
			}
		}
	})
}
</script>

解释：在上述代码中，当用户完成用户编码输入之后，点击按钮会进行Ajax异步验证，请求URL为“/user/ucexist.html”，请求参数为用户输入的userCode的值。异步调用请求后，返回的数据类型为JSON类型，若成功，则根据返回的json对象进行信息提示。

【3】Controller层：

在userController添加处理方法：

	@RequestMapping(value="/ucexist.html")
	@ResponseBody
	public Object userCodeIsExit(@RequestParam String userCode) throws SQLException, ParseException{
		System.out.println("UserController-userCodeIsExit");
		System.out.println("**Ajax提交的数据：userCode "+userCode);
		HashMap<String,String> resultMap = new HashMap<String,String>();
		if(StringUtils.isEmpty(userCode)){
			resultMap.put("userCode", "exist");
		}else{
			User user = userService.selectUserCodeExist(userCode);
			if(user.getAddress() != null){
				resultMap.put("userCode", "exist");
			}else{
				resultMap.put("userCode", "noexist");
			}
		}
		System.out.println("**resultMap-key&value: "+resultMap);
		return JSONArray.toJSONString(resultMap);
	}

解释：（1）控制器的处理方法userCodeIsExit() ，通过前台传递过来的userCode进行入参，最后返回Object。在方法体内，调用userService的selectUserCodeExist()进行验证，并返回user对象。若user为空，则证明不重名，反之重名。

（2）对于验证结果，则放进去HashMap里，通过JSONArray.toJSONString(resultMap)，把其转换为json对象，进行返回输出。

（3）注意：需要使用@ResponseBody 注解，该注解作用：将标注该注解的处理方法的返回结果直接写入HTTP Response Body（Response 对象的数据区中）。一般情况下，@ResponseBody会在异步获取数据时使用，被其标注的方法返回的数据将会输出到响应流中，客户端获取并显示。

【4】测试结果

打印日志：

1 session.getAttribute(user)+++nullUser [id=null, userCode=null, userName=null, userPassword=null, gender=null, birthdayString=null, birthday=null, phone=null, address=null, userRole=null, createdBy=null, creationDate=null, creationDateString=null, modifyBy=null, modifyDate=null, modifyDateString=null, idPicPath=null, workPicPath=null, roleName=null]
UserController-userCodeIsExit
**Ajax提交的数据：userCode ffff
UserServiceImpl-selectUserCodeExist
UserDaoImpl-selectUserCodeExist
select - sql1: select * from smbms_user where userCode='ffff';

**resultMap-key&value: {userCode=exist}

测试输入与结果：