通过ajax实现json数据的交互

ajax的异步刷新配合json数据的强无敌交互简直势不可挡！下面上操作：

jsp:

<body>
用户名：<input type="text" name="name" id="name" value=""><span id="regist"></span>
密码：<input type="password" id="psw" name="password" value="">
</body>

<script type="text/javascript">
$(function(){
$("#name").blur(function(){
	$.ajax({
		url:"regist.do",
		type:"post",
		async:true,
		dataType:"text",
		contentType:"application/json;charset:UTF-8",
		data:$("#name").val(),    /* $("form").serialize(), */
		success:function(result){
			var msg = result;
			$("#regist").html(msg);
		},
		error:function(result){
			$("#regist").html("输入错误");
		}
	});
});
})
</script>

async默认为true，为异步刷新，false为同步。

contentType为传入后台的数据编码，默认为page编码。

dataType为返回数据格式，如果返回文本用text，返回对象可以用json格式。

controller:

@RequestMapping(value="regist",produces="text/html;charset=UTF-8")
@ResponseBody
public String checkRegist(@RequestBody String name){
	String msg = userService.checkLoginUser(name);
	return msg;
}

这里的produces为返回前台的字符编码，当项目中没有配置全局编码时这种方式可以简单实现。

上面只是简单的异步刷新，下面调用jackson实现json数据的处理：

首先需要json jar包，一个也不能少且版本最好高点，不然会报错，有的版本之间内部变化很大！

这是我采用的jar包及版本：

commons-beanutils-1.7.0.jar commons-collections-3.2.2.jar commons-lang-2.4.jar

commons-logging-1.1.2.jar ezmorph-1.0.6.jar json-lib-2.2.1-jdk15.jar

下面附上找jar包常用地址：https://mvnrepository.com/tags/maven

@RequestMapping(value="jsonTest4",produces="text/html;charset=UTF-8;")
@ResponseBody
public String jsonTest4(@RequestBody String jsonData){
	
		JSONObject jsonobject = JSONObject.fromObject(jsonData);
		 String id = jsonobject.getString("userid");
	          User user = userService.getUserById(id);
	          Map<String,Object> map = new HashMap<String,Object>();
	          map.put("user", user);
	          JSONObject jo = JSONObject.fromObject(map);
	           return jo.toString();
	     }

@ResponseBody定义方法返回数据而不是跳转页面；@RequestBody用来处理application/json类型。

通过ajax实现json数据的交互

猜你喜欢