关于SpringMVC中Ajax的使用和配置
0.使用二阶段的返回数据形式GSON,request,response
1.关于SpringMVC中使用Ajax返回JSON数据的配置
A.需要使用相关的JAR包[jackson--jar]
2.示例关于注册验证
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<script type="text/javascript" src="resource/jquery.js"></script>
<script type="text/javascript">
function toCheck(){
var account = $.trim($("#account").val());
$.post("reg",{account:account},function(data){
if(data.flag=="success"){
//其他操作
}else{
alert(data.message);
return false
}
});
}
</script>
</head>
<body>
<h2>用户验证</h2>
<input type="text" name="account" id="account" onchange="toCheck()">
</body>
@RequestMapping("/reg")
@ResponseBody
//该注解会根据不同的类型,进行转换,最终把对象和集合等都转换成JSON对象
public Map<String,Object> test(String account){
Map<String,Object> map = new HashMap<>();
if("admin".equals(account)){
map.put("flag", "error");
map.put("message", "该账号已经被注册");
}else{
map.put("flag", "success");
}
return map;
}
模拟情况一: 页面输出对象的详细信息
<head>
<%--
参考文章:http://www.cnblogs.com/muqianying/archive/2012/03/16/2400280.html
--%>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
$.post("load",function(data){
//第一种解决方法:也是比较常用
$("ul").append("<li>"+data.user_id+"</li>");
$("ul").append("<li>"+data["user_name"]+"</li>");
$("ul").append("<li>"+data.password+"</li>");
$("ul").append("<li>"+data.account+"</li>");
//第二种解决方法:使用Jquery提供的工具类
/*
$.each(data,function(key,value){
$("ul").append("<li>"+value+"</li>");
});
*/
//第三种解决方法:使用原生的JavaScript解决
/*
for(var key in data){
console.log(data[key])
}
*/
});
})
</script>
</head>
<body>
<h2>显示一个用户的详细</h2>
<ul></ul>
</body>
@RequestMapping("/load")
@ResponseBody
public User load(){
User user = new User();
user.setUser_id(1000);
user.setAccount("wukong");
user.setPassword("123456");
user.setUser_name("悟空");
user.setPhoto("a.jpg");
return user;
}
模拟情况二:加载更多 [分页]
<script type="text/javascript" src="resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
initData();
})
function initData(){
$.post("list",function(data){
if(data!=null&&data.length>0){
for(var i=0;i<data.length;i++){
$("tbody").append("<tr><td>"+data[i].user_name+"</td></tr>");
}
}
});
}
</script>
</head>
<body>
<h2>显示一个用户的详细</h2>
<table border="1">
<tbody></tbody>
</table>
<input type="button" value="加载更多" onclick="initData()">
</body>
数据来源:
@RequestMapping("/list")
@ResponseBody
public List<User> list(){
List<User> userList = new ArrayList<User>();
User user = new User();
user.setUser_id(1000);
user.setAccount("wukong");
user.setPassword("123456");
user.setUser_name("悟空");
user.setPhoto("a.jpg");
userList.add(user);
user = new User();
user.setUser_id(2000);
user.setAccount("bajie");
user.setPassword("123456");
user.setUser_name("八戒");
user.setPhoto("a.jpg");
userList.add(user);
return userList;
}