这部分比較复杂，之前看过自己的同学开发一个选课系统的时候用到了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

语法规则：

分名称和值对，数据分隔 ： {}保存对象 []保存数组
“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"}]

注意：有些人数据没正常显示出来还给我了踩。

今天发现了问题。

由于在后台处理是。有些人为了避免使用转义字符。直接将双引號改为单引號。
  1. String json = "[{'id':1,'name':'ee','password':'1'}]";

这样datagrid根本就载入不到数据。改为转义字符正常

  1. String json = "[{\"id\":1,\"name\":\"ee\",\"password\":\"1\"}]";

数组里有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">
  4.  
  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> -->
  24.  
  25. <!-- 		这样的写法也是能够的	    <th data-options="field:'id',width:150">id</th> -->
  26.  
  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>
  38.  
  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);
  25.  
  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. %>
  14.  
  15. <%
  16. String path = request.getContextPath();
  17. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  18. %>
  19.  
  20. <html>
  21. <head>
  22. <script src="http://localhost:8080/EasyProject/jquery.min.js" type="text/javascript"></script>
  23. <script src="http://localhost:8080/EasyProject/jquery.easyui.min.js" type="text/javascript"></script>
  24. <link href="http://localhost:8080/EasyProject/themes/default/easyui.css" rel="stylesheet"type="text/css" />
  25. <link href="http://localhost:8080/EasyProject/themes/icon.css" rel="stylesheet" type="text/css" />
  26. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  27. <title>Insert title here</title>
  28. </head>
  29. <body>
  30. <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
  31. 		toolbar="#toolbar"
  32. 		rownumbers="true" fitColumns="true" singleSelect="true">
  33. 	<thead>
  34. 		<tr>
  35. 			<th field="id" width="50">id</th>
  36. 			<th field="name" width="50">name</th>
  37. 			<th field="password" width="50">password</th>
  38. 		</tr>
  39. 	</thead>
  40. </table>
  41. <div id="toolbar">
  42. 	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
  43. 	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
  44. 	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
  45. </div>
  46. <%
  47. /* Connection c = ConnectToSQL.getConn();
  48. Statement st = ConnectToSQL.getSt(c);
  49. List<User> list = new ArrayList<User>();
  50. try {
  51. 	ResultSet rs = st.executeQuery("select * from user");
  52. 	while(rs.next()){
  53. 		User u = new User();
  54. 		u.setId(rs.getInt("userid"));
  55. 		u.setName(rs.getString("username"));
  56. 		u.setPassword(rs.getString("password"));
  57. 		list.add(u);
  58. 	}
  59. } catch (SQLException e) {
  60. 	// TODO Auto-generated catch block
  61. 	e.printStackTrace();
  62. }
  63. List<User> o  = JSONArray.fromObject(list); */
  64. String json=(String)request.getAttribute("json");
  65. System.out.println(json);
  66. %>
  67.  
  68. <%=json%>
  69. </body>
  70. </html>

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

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

list_jsp里面仅仅须要：

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

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

使用Struts2和jQuery EasyUI实现简单CRUD系统（五）——jsp,json,EasyUI的结合的更多相关文章

  1. 使用Struts2和jQuery EasyUI实现简单CRUD系统（转载汇总）

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  2. 使用Struts2和jQuery EasyUI实现简单CRUD系统（七）——数据分页处理

    上篇完毕多选删除的功能之后,接下来就是做分页功能了.曾经的分页是一个麻烦的问题.并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. watermark/2/tex ...

  3. mvc架构的简单登录系统，jsp

    文件结构 三个jsp文件负责前段界面的实现 login.jsp <%@ page language="java" import="java.util.*" ...

  4. jQuery EasyUI 应用 – 创建 CRUD 应用（表格）

    jQuery EasyUI 应用 - 创建 CRUD 应用 本节介绍如何创建CRUD应用. CRUD分别是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删 ...

  5. EasyUI datagrid简单运用

    jquery的前端框架挺多的,有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好,因为里面控件很丰富,而bootstrap非常简洁大方,但是控件相 对比较少,特别是复杂的 ...

  6. struts2实现jQuery的异步交互

    struts2中jQuery的异步交互有两种方式: 1)是利用构造字符串的方式来实现: 使用该方法主要是在服务器端根据前端的请求,返回一个字符串信息,然后前端的jQuery通过解析该字符串信息得到对应 ...

  7. EasyUI+Python-flask实现CRUD应用

    1.需求分析 需求:应用easyui制作前端表格数据显示,flask制作后端路由 环境搭建略 2.easyui前端实现 2.1 easyui是前端实用的一个框架,这里我们要实现的是easyui的CRU ...

  8. Struts2 整合jQuery实现Ajax功能(1)

    技术领域非常多东西流行,自然有流行的道理.这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明白个概念: jQuery是什么:是使用javascript语言开发的,用 ...

  9. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

随机推荐

  1. Nginx配置指令location匹配符优先级和安全问题

    使用nginx 很久了,它的性能高,稳定性表现也很好,得到了很多人的认可.特别是它的配置,有点像写程序一样,每行命令结尾一个";"号,语句块用"{}"括起来. ...

  2. MongoDB实现数组中重复数据删除

    这个功能真的是写死我了,对于MongoDB一点都不熟悉,本来想使用spring与MongoDB的融合mongoDBTemplate,发现压根不是web项目,懒得配置那些配置文件,就使用最原始的数据库操 ...

  3. ROS-tutorials-launch-查看日志

    前言:launch文件的作用是一次可以启动多个节点. 1.新建launch文件 在chapter2_tutorials包下新建launch文件夹,并在launch文件夹下新建chapter2.laun ...

  4. ios网络模拟

    ios网络模拟 在ios开发和测试中,需要针对不同网络状况做一下测试优化,如果在真机上用真实网络的话,需要不同网络(2G.3G.4G)的手机卡,比较麻烦. 其实可以模拟不同网络状况,以下分别针对真机和 ...

  5. SQLServer Union 和 Union All 在Insert 语句中的不同效果

    如果不是发了那个帖子还不会像这样意外发现这两者的不同,好歹了也工作了一段时间,真是汗颜 上例子: 执行此条插入语句后,只会插入两条数据,因为会把完全重复的数据过滤掉 insert into tests ...

  6. Web-数据库-mysql篇

    DDL创造 create  修改 alter  删除 dorp DML插入 insert  删除 delete 更新 updateDQLselect from where MySQL与JDBC 一.用 ...

  7. matplotlib简介-高质量图形输出

    Matplotlib 是一个用来绘制二维图形的 Python 模块,它克隆了许多 Matlab 中的函数, 用以帮助 Python 用户轻松获得高质量(达到出版水平)的二维图形. 文章来源:http: ...

  8. C# HttpWebRequest post 请求传参数

    Dictionary<string, string> parameters = new Dictionary<string, string>(); //参数列表 paramet ...

  9. bootstrap与jQuery结合的动态进度条

    此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...

  10. 应用二：Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...