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

注意：有些人数据没正常显示出来还给我了踩。
今天发现了问题。
由于在后台处理是。有些人为了避免使用转义字符。直接将双引號改为单引號。 
String json = "[{'id':1,'name':'ee','password':'1'}]";

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

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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">新建</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">改动</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="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";}

我们拿到数据之后，使用原生的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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="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%>

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

转载于:https://www.cnblogs.com/brucemengbm/p/6906128.html

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

  1. Struts2 整合jQuery实现Ajax功能

    为什么80%的码农都做不了架构师?>>>    Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝 ...

  2. 【快速上手系列】五分钟即可学会的easyUI的简单使用教程

    [快速上手系列]五分钟即可学会的easyUI的简单使用教程 一个简单方便的前端框架 引入文件 引入两个css样式和三个js <!--引入easyUI的样式 --> <link hre ...

  3. ajax百分比加载特效,jQuery实现的简单百分比进度条效果示例

    本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: var progressId = "ProgressBarID"; fun ...

  4. EasyUI之简单实现Datagrid分页（C#）

    EasyUI之简单实现Datagrid分页(C#) 刚刚开始学着用EasyUI,有兴趣的TX可以去http://www.jeasyui.com/看一下,当然很多人都知道,不是什么新鲜的东西: 这两天在 ...

  5. 使用Servlet 3.0，Redis / Jedis和CDI的简单CRUD –第1部分

    在这篇文章中,我们将构建一个简单的用户界面. 数据将存储在Redis中. 为了与Redis交互,我们将使用Jedis库. CDI用于Depedency Injection,而Servlet 3.0用于 ...

  6. 使用Servlet 3.0，Redis / Jedis和CDI的简单CRUD –第2部分

    在本文中,我们将重点介绍CDI和Servlet 3.0. 您可以在此处看到第1部分. 让我们从CDI开始. 当我开始撰写源自该系列的文章时,我并没有考虑撰写CDI. 真诚地说,我以前从未使用过. 这篇 ...

  7. html表格翻页简单,利用jQuery实现一个简单的表格上下翻页效果

    前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: 日期参与团购场次团购结果当前状态 02.08 第一 ...

  8. 求根计算机在线,jQuery实现的简单在线计算器功能

    本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: /p> "http://www.w3.org/TR/xhtm ...

  9. java实现歌词滚动,jQuery实现的简单歌词滚动功能示例

    本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css /* CSS Document */ * { margin: 0; paddi ...

  10. leaflet+geoserve+jquery实现简单Webgis系统(附源码下载)

    1.基于leaflet的小系统,源码1000多行,能注释的我都注释了,运行没有任何问题,源码下载链接在评论区: 2.里面用到了很多插件,大部分插件都是使用BootCDN的复制<script> ...

最新文章

  1. 【西交ACM】100 A+B problem
  2. android access 腾讯地图,Android 腾讯地图 选点定位，仿微信发送位置
  3. python和c哪个好学-零基础学C好还是python？
  4. Object-C-block
  5. POJ2299 逆序数
  6. android9系统webview崩溃,Android WebView已开始在Android 9上崩溃
  7. oracle获取序列并赋值,Oracle中序列的使用
  8. 达芬奇17(DaVinci Resolve Studio 17)兼容big surv17.0b9最新版
  9. linux 进程 D 状态,Linux 进程的 Uninterruptible sleep(D) 状态
  10. Android 将签名布局旋转90度,Android签名生成和互转(示例代码)
  11. linux桌面文件夹改名,Ubuntu 无法重命名文件问题的解决
  12. 数据约束 for：麻包缝裤衩
  13. 弱引用（WeakReference）初识
  14. python聊天小程序支持私聊和多人_Python实现多人在线匿名聊天的小程序
  15. 机器学习项目三：XGBoost人体卡路里消耗预测
  16. zedboard各种相关资料整理中
  17. AcWing 1170 排队布局
  18. 京东技术助力十余省抗击疫情 应急资源平台已提供超6.6亿件抗疫物资
  19. 小鸟云：浅谈5 种典型的云原生架构反模式
  20. Xunsearch与Sphinx的预比较

热门文章

  1. 【渝粤教育】电大中专机电设备管理作业 题库
  2. [渝粤教育] 西南科技大学 公共组织财务 在线考试复习资料
  3. Pandas系列(一)数据读取、数据结构Dataframe和Series
  4. 游戏服务器的思考之三：谈谈MVC
  5. WPF和Winform中picturebox图片局部放大
  6. linux-ssh免密登录
  7. python序列化-复习
  8. [转]unresolved external symbol _main解决办法
  9. 由装饰者模式来深入理解Java I/O整体框架
  10. 二分查找与 bisect 模块