首页 > 代码库 > 使用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做到的功能就是页面的不刷新而偷偷与server连接后拿到数据再返回到前端。
我这个表格展如今这里。事实上我要的数据是偷偷用了ajax拿到数据。而且通过js解析之后再准确地放回表格中。
(一)JSON
语法规则:
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"}]
String json = "[{‘id‘:1,‘name‘:‘ee‘,‘password‘:‘1‘}]";
String json = "[{\"id\":1,\"name\":\"ee\",\"password\":\"1\"}]";
数组里有4个元素,一个元素是一个对象:有id,name和password。
(二)EasyUI的DataGrid获取json数据。
DataGrid:
<%@ 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> <script src="http://localhost:8080/EasyProject/jquery.min.js" type="text/javascript"></script> <script src="http://localhost:8080/EasyProject/jquery.easyui.min.js" type="text/javascript"></script> <link href="http://localhost:8080/EasyProject/themes/default/easyui.css" rel="stylesheet"type="text/css" /> <link href="http://localhost:8080/EasyProject/themes/icon.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="list_ej" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <!-- <th field="id" width="50">id</th> <th field="name" width="50">name</th> <th field="password" width="50">password</th> --> <!-- 这样的写法也是能够的 <th data-options="field:‘id‘,width:150">id</th> --> <th field="id",width=“120">id</th> <th field="name",width="120">name</th> <th data-options="field:‘password‘,width:‘120‘,align:‘right‘">password</th> </tr> </thead> </table> <div id="toolbar"> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建</a> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">改动</a> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a> </div> </body> </html>
url="list_ej"
重点的地方就是url,url写的一定要是返回json格式数据的url,我们用了action就能够通过这个url跳到响应的jsp页面。
list_ej通过以下的action拿到数据之后。再跳到list_ej.jsp。
action里面拿到数据库数据并进行json数据的转换,网上一查的所有都是复制黏贴用了json框架的。有代码的那些又写得乱起八糟。自己摸索了好久。
JSONArray能够将list里面的数据转换成JSON格式。
public String list_ej(){ ActionContext ctx=ActionContext.getContext(); Connection c = ConnectToSQL.getConn(); Statement st = ConnectToSQL.getSt(c); List<User> list = new ArrayList<User>(); String result="{}"; try { ResultSet rs = st.executeQuery("select * from user"); while(rs.next()){ User u = new User(); u.setId(rs.getInt("userid")); u.setName(rs.getString("username")); u.setPassword(rs.getString("password")); list.add(u); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } List<User> o = JSONArray.fromObject(list); result=o.toString(); try { // ServletActionContext.getResponse().getWriter().println(JSONArray.fromObject(list)); ctx.put("json", result); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return "success"; }
我们拿到数据之后,使用原生的JSON类,进行JSON格式的转换,然后再把字符串返回到另外一个页面List_ej.jsp。这个页面就是终于DataGrid取数据的地方。
问题所在
这里自己挖了一个大坑:自己之前写的jsp。
<%@page import="com.opensymphony.xwork2.ActionContext"%> <%@ 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"> <%@ page import="util.*, org.apache.struts2.ServletActionContext"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ page import="java.sql.*,java.util.*,net.sf.json.*"%> <%! Connection c = null; Statement st = null; ResultSet rs = null; String s = ""; %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html> <head> <script src="http://localhost:8080/EasyProject/jquery.min.js" type="text/javascript"></script> <script src="http://localhost:8080/EasyProject/jquery.easyui.min.js" type="text/javascript"></script> <link href="http://localhost:8080/EasyProject/themes/default/easyui.css" rel="stylesheet"type="text/css" /> <link href="http://localhost:8080/EasyProject/themes/icon.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="id" width="50">id</th> <th field="name" width="50">name</th> <th field="password" width="50">password</th> </tr> </thead> </table> <div id="toolbar"> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a> </div> <% /* Connection c = ConnectToSQL.getConn(); Statement st = ConnectToSQL.getSt(c); List<User> list = new ArrayList<User>(); try { ResultSet rs = st.executeQuery("select * from user"); while(rs.next()){ User u = new User(); u.setId(rs.getInt("userid")); u.setName(rs.getString("username")); u.setPassword(rs.getString("password")); list.add(u); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } List<User> o = JSONArray.fromObject(list); */ String json=(String)request.getAttribute("json"); System.out.println(json); %> <%=json%> </body> </html>
这样的逻辑是没有问题的,就是一直显示不出来。调了好久。
事实上问题在于————我写太多东西了。
list_jsp里面仅仅须要:
<% String json=(String)request.getAttribute("json"); %> <%=json%>
最后,DataGird顺利取到数据库数据。
使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合