Springmvc返回json数据
数据存储方式?
变量,数组,对象,集合,文件,xml,数据库{oracle,mysql, redis}
数据传输方式?xml,json ECMAScript: javascript
Json:是一种轻量级的数据交换格式。它基于ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.
{"firstName": "John"} |
这很容易理解,等价于这条 JavaScript 语句:
{firstName = "John"} |
浏览器:利用json 将某些轻量的数据存储在本地。
要想将数据转换为json,必须要先导入jar,然后在@RequestMapping()后加@ResponseBody
案例驱动:当list.jsp一运行的时候,就要去加载所有的数据!
使用的技术:jquery,Ajax。
List.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入js文件 --> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script> <script type="text/javascript"> /* 当页面加载的时候就运行js */ $(function(){ $.ajax({ type:"post", url:"/06springmvc/listUser", dataType:"json", success:function(data){ /* 循环data中数据并添加到table */ for(var i = 0;i<data.length;i++){ //一行数据 var content = "<tr><td>"+data[i].id+"</td><td>"+data[i].name+"</td><td>"+data[i].pwd+"</td></tr>" //将循环出来的每一行数据添加到table中 $("#tab").append(content); } } }) }) </script> <title>查询所有数据</title> </head> <body> <table id="tab" > <tr> <th>ID</th> <th>NAME</th> <th>PWD</th> </tr> <tr> <td>${info.id }</td> <td></td> <td></td> </tr>
</table> </body> </html> |
Controller
@RequestMapping("listUser") @ResponseBody public List<User> findAll(){ // 利用集合模拟一个数据库 List<User> list = new ArrayList<>(); list.add(new User(1, "高圆圆", "666")); list.add(new User(2, "唐嫣", "666")); list.add(new User(3, "志林", "666")); list.add(new User(4, "宋慧乔", "666")); list.add(new User(5, "陈乔恩", "666")); list.add(new User(6, "金星", "666")); list.add(new User(7, "刘德华", "666")); list.add(new User(8, "梁朝伟", "666")); list.add(new User(9, "郭富城", "666")); list.add(new User(10, "宋喆", "666")); list.add(new User(11, "王宝强", "666")); System.out.println(list); // 将集合数据转化为json格式 return list; } |
使用gson和使用jackson两个jar包都可以转换json数据,不同的是!
Gson要返回的一个字符串!
Jackson:返回的一个对象或者集合
案例驱动:登录成功之后,显示查询数据页面!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 点击login的时候进行异步提交 */ $("#log").click(function(){ var name = $("#tname").val(); var pwd = $("#tpwd").val(); $.ajax({ type:"post", url:"/06springmvc/loginAjax", data:{"name":name,"pwd":pwd}, dataType:"json", success:function(data){ if(data.flg=="ok"){ alert("登录成功!") /* 页面跳转 */ location.href="/06springmvc/list.jsp"; }else{ alert("登录失败!") } } }) }) }) </script> </head> <body> <input type="text" name="name" id="tname"/><br> <input type="password" name="pwd" id="tpwd"/><br> <input type="submit" id="log" value="login"/><br> </body> </html> |
Controller
@RequestMapping("loginAjax") @ResponseBody public String loginAjax(User user) { // 通过一个表示来判断登录是否成功! // 可以通过map集合来判断 Map map = new HashMap<>(); System.out.println(user); if ("admin".equals(user.getName())) { map.put("flg", "ok"); } else { map.put("flg", "ng"); } // 将map返回给前台页面。list转换json,map 可以不 // 创建Gson对象 Gson gson = new Gson(); String json = gson.toJson(map); return json; } |