Struts2和jQuery EasyUI实现简单CRUD系统（二）——jsp,json,EasyUI的结合



Struts2和jQuery EasyUI实现简单CRUD系统（二）——jsp,json,EasyUI的结合。

之前看过自己的同学开发一个选课系统的时候用到了JSON，但是一直不知道有什么用，写东西也没用到，所以没去学他。然后现在以这种怀着好奇心，这是做什么用的，这是怎么用的，这是怎么结合的心态去学习，效果很好。

 

这次用到的EasyUI的数据网格，DataGrid。需用引用一个url传来的json数据，然后整齐美观地展现在页面上。想想自己之前做的东西，就直接拿数据库的数据和html的table代码进行拼接，整洁是整洁，但是代码写得特别别扭。让我站在一个设计者的思路上来看，如果我现在提供了一个表格模板，然后我要将你的数据读取进去之后再进行顺序的排列，那么我们就需要定义一种通用的格式了，我能读取任何遵循这种格式的数据并把它展现在DataGird中，这就是EasyUI的功能，而格式的功能是谁实现呢——JSON登场了。

 

JSON，javascript object notation,js对象标记（表示）法，类似xml但是比xml小且快。xml提取元素的话使用dom操作，需要child这些东西。

 

JSON能通过js解析和ajax传输，对了，要的就是这个。

 

谈到ajax顺便也再看了一下，以前用的都忘记了。ajax做到的功能就是页面的不刷新而偷偷与服务器连接后拿到数据再返回到前端。

 

我这个表格展现在这里，其实我要的数据是偷偷用了ajax拿到数据，并且通过js解析之后再准确地放回表格中。

 

（一）JSON

语法规则：

 

分名称和值对，数据分隔 ： {}保存对象 []保存数组
“a”:1    对应js中的  a = 1。

json数据例子：
[{"id":1,"name":"ee","password":"1"},
{"id":2,"name":"df2","password":"123"},
{"id":3,"name":"45ty","password":"123"},
{"id":4,"name":"sdfy","password":"123"},
{"id":10,"name":"sdfy","password":"123"}]

 

 

数组里有4个元素，一个元素是一个对象：有id，name和password。

 

（二）EasyUI的DataGrid获取json数据。

DataGrid：

 

  1. <%@ page language=”java” contentType=”text/html; charset=UTF-8″
  2.     pageEncoding=”UTF-8″%>
  3. <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
  5. <html>
  6. <head>
  7. <script src=”http://localhost:8080/EasyProject/jquery.min.js” type=”text/javascript”></script>
  8. <script src=”http://localhost:8080/EasyProject/jquery.easyui.min.js” type=”text/javascript”></script>
  9. <link href=”http://localhost:8080/EasyProject/themes/default/easyui.css” rel=”stylesheet”type=”text/css” />
  10. <link href=”http://localhost:8080/EasyProject/themes/icon.css” rel=”stylesheet” type=”text/css” />
  11. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
  12. <title>Insert title here</title>
  13. </head>
  14. <body>
  15. <table id=”dg” title=”My Users” class=”easyui-datagrid” style=”width:550px;height:250px”
  16.         url=”list_ej”
  17.         toolbar=”#toolbar”
  18.         rownumbers=”true” fitColumns=”true” singleSelect=”true”>
  19.     <thead>
  20.         <tr>
  21. <!–             <th field=”id” width=”50″>id</th>
  22.             <th field=”name” width=”50″>name</th>
  23.             <th field=”password” width=”50″>password</th> –>
  25. <!–         这种写法也是可以的       <th data-options=”field:’id’,width:150″>id</th> –>
  27.                 <th field=”id”,width=“120″>id</th>
  28.                 <th field=”name”,width=”120″>name</th>
  29.                 <th data-options=”field:’password’,width:’120′,align:’right’”>password</th>
  30.         </tr>
  31.     </thead>
  32. </table>
  33. <div id=”toolbar”>
  34.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-add” plain=”true” onclick=”newUser()”>新建</a>
  35.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-edit” plain=”true” onclick=”editUser()”>修改</a>
  36.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-remove” plain=”true” onclick=”destroyUser()”>删除</a>
  37. </div>
  39. </body>
  40. </html>

 


 

 

  1. url=”list_ej”

 

重点的地方就是url，url写的一定要是返回json格式数据的url，我们用了action就可以通过这个url跳到响应的jsp页面。

list_ej通过下面的action拿到数据之后，再跳到list_ej.jsp。

 

action里面拿到数据库数据并进行json数据的转换，网上一查的全部都是复制黏贴用了json框架的，有代码的那些又写得乱起八糟，自己摸索了好久。

JSONArray可以将list里面的数据转换成JSON格式。

 

  1. public String list_ej(){
  2.         ActionContext ctx=ActionContext.getContext();
  3.         Connection c = ConnectToSQL.getConn();
  4.         Statement st = ConnectToSQL.getSt(c);
  5.         List<User> list = new ArrayList<User>();
  6.         String result=”{}”;
  7.         try {
  8.             ResultSet rs = st.executeQuery(“select * from user”);
  9.             while(rs.next()){
  10.                 User u = new User();
  11.                 u.setId(rs.getInt(“userid”));
  12.                 u.setName(rs.getString(“username”));
  13.                 u.setPassword(rs.getString(“password”));
  14.                 list.add(u);
  15.             }
  16.         } catch (SQLException e) {
  17.             // TODO Auto-generated catch block
  18.             e.printStackTrace();
  19.         }
  20.         List<User> o  = JSONArray.fromObject(list);
  21.         result=o.toString();
  22.         try {
  23. //          ServletActionContext.getResponse().getWriter().println(JSONArray.fromObject(list));
  24.             ctx.put(“json”, result);
  26.         } catch (Exception e) {
  27.             // TODO Auto-generated catch block
  28.             e.printStackTrace();
  29.         }
  30.         return ”success”;
  31.     }

我们拿到数据之后，使用原生的JSON类，进行JSON格式的转换，然后再把字符串返回到另外一个页面List_ej.jsp。这个页面就是最终DataGrid取数据的地方。

 

 

问题所在

这里自己挖了一个大坑：自己之前写的jsp。

 

  1. <%@page import=”com.opensymphony.xwork2.ActionContext”%>
  2. <%@ page language=”java” contentType=”text/html; charset=UTF-8″
  3.     pageEncoding=”UTF-8″%>
  4. <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
  5. <%@ page import=”util.*, org.apache.struts2.ServletActionContext”%>
  6.     <%@ taglib prefix=”s” uri=”/struts-tags”%>
  7. <%@ page import=”java.sql.*,java.util.*,net.sf.json.*”%>
  8. <%!
  9.     Connection c = null;
  10.     Statement st = null;
  11.     ResultSet rs = null;
  12.     String s = ”";
  13. %>
  15. <%
  16. String path = request.getContextPath();
  17. String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
  18. %>
  22. <html>
  23. <head>
  24. <script src=”http://localhost:8080/EasyProject/jquery.min.js” type=”text/javascript”></script>
  25. <script src=”http://localhost:8080/EasyProject/jquery.easyui.min.js” type=”text/javascript”></script>
  26. <link href=”http://localhost:8080/EasyProject/themes/default/easyui.css” rel=”stylesheet”type=”text/css” />
  27. <link href=”http://localhost:8080/EasyProject/themes/icon.css” rel=”stylesheet” type=”text/css” />
  28. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
  29. <title>Insert title here</title>
  30. </head>
  31. <body>
  32. <table id=”dg” title=”My Users” class=”easyui-datagrid” style=”width:550px;height:250px”
  33.         toolbar=”#toolbar”
  34.         rownumbers=”true” fitColumns=”true” singleSelect=”true”>
  35.     <thead>
  36.         <tr>
  37.             <th field=”id” width=”50″>id</th>
  38.             <th field=”name” width=”50″>name</th>
  39.             <th field=”password” width=”50″>password</th>
  40.         </tr>
  41.     </thead>
  42. </table>
  43. <div id=”toolbar”>
  44.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-add” plain=”true” onclick=”newUser()”>New User</a>
  45.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-edit” plain=”true” onclick=”editUser()”>Edit User</a>
  46.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-remove” plain=”true” onclick=”destroyUser()”>Remove User</a>
  47. </div>
  48. <%
  49. /* Connection c = ConnectToSQL.getConn();
  50. Statement st = ConnectToSQL.getSt(c);
  51. List<User> list = new ArrayList<User>();
  52. try {
  53.     ResultSet rs = st.executeQuery(“select * from user”);
  54.     while(rs.next()){
  55.         User u = new User();
  56.         u.setId(rs.getInt(“userid”));
  57.         u.setName(rs.getString(“username”));
  58.         u.setPassword(rs.getString(“password”));
  59.         list.add(u);
  60.     }
  61. } catch (SQLException e) {
  62.     // TODO Auto-generated catch block
  63.     e.printStackTrace();
  64. }
  65. List<User> o  = JSONArray.fromObject(list); */
  66. String json=(String)request.getAttribute(“json”);
  67. System.out.println(json);
  68. %>
  70. <%=json%>
  71. </body>
  72. </html>

 

 

这样的逻辑是没有问题的，就是一直显示不出来。调了好久。

其实问题在于————我写太多东西了。

list_jsp里面只需要：

 

  1. <%
  2. String json=(String)request.getAttribute(“json”);
  3. %>
  4. <%=json%>

最后，DataGird顺利取到数据库数据。