第六节 Spring MVC -

wx1568520008

浏览: 20358 次

最近访客更多访客>>

闪客行

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (100)

社区版块

存档分类

2019-09 ( 100)
更多存档...

第六节 Spring MVC

关于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;
}

转载于:https://my.oschina.net/courage123/blog/662010

分享到：