標籤：jsp json jquery easyui datagrid
這部分比較複雜，之前看過自己的同學開發一個選課系統的時候用到了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。
數組裡有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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">建立</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a><a href="#" 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 blocke.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 blocke.printStackTrace();} return "success";}問題所在
這裡自己挖了一個大坑：自己之前寫的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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a><a href="#" 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 blocke.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%>使用Struts2和jQuery EasyUI實現簡單CRUD系統（二）——jsp,json,EasyUI的結合
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
