使用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'}]";
这样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" 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 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="#" 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 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的结合的更多相关文章
- 使用Struts2和jQuery EasyUI实现简单CRUD系统（转载汇总）
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统（七）——数据分页处理
上篇完毕多选删除的功能之后,接下来就是做分页功能了.曾经的分页是一个麻烦的问题.并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. watermark/2/tex ...
- mvc架构的简单登录系统，jsp
文件结构 三个jsp文件负责前段界面的实现 login.jsp <%@ page language="java" import="java.util.*" ...
- jQuery EasyUI 应用 – 创建 CRUD 应用（表格）
jQuery EasyUI 应用 - 创建 CRUD 应用 本节介绍如何创建CRUD应用. CRUD分别是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删 ...
- EasyUI datagrid简单运用
jquery的前端框架挺多的,有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好,因为里面控件很丰富,而bootstrap非常简洁大方,但是控件相 对比较少,特别是复杂的 ...
- struts2实现jQuery的异步交互
struts2中jQuery的异步交互有两种方式: 1)是利用构造字符串的方式来实现: 使用该方法主要是在服务器端根据前端的请求,返回一个字符串信息,然后前端的jQuery通过解析该字符串信息得到对应 ...
- EasyUI+Python-flask实现CRUD应用
1.需求分析 需求:应用easyui制作前端表格数据显示,flask制作后端路由 环境搭建略 2.easyui前端实现 2.1 easyui是前端实用的一个框架,这里我们要实现的是easyui的CRU ...
- Struts2 整合jQuery实现Ajax功能(1)
技术领域非常多东西流行,自然有流行的道理.这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明白个概念: jQuery是什么:是使用javascript语言开发的,用 ...
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
随机推荐
- bind()，call(), apply()方法的区别是什么？
bind(),call(), apply()方法的区别是什么? 共同点:改变this指向,任何调用都不在起作用 bind() 改变this的指向,不会调用函数,返回一个新的函数 var o ={a:' ...
- Jsoup的简单的使用示例
利用Jsoup中的相关方法实现网页中的数据爬去,本例子爬去的网页为比较流行的programmableweb中的mashup描述内容,然后为数据库中存在的mashup添加相应的描述. package c ...
- 大数字运算——2、BigDecimal
package com.wh.BigInteger; import java.math.BigDecimal; import java.util.Arrays; /** * @author 王恒 * ...
- Css float 盒子模型 position
属性: float 浮动 浮动的内容用div包起来,给div设置宽高 clear 清除浮动. box-sizing 标准模式下的盒模型 content-box:(默认属性) padding和borde ...
- idiom的学习笔记（一）、三栏布局
三栏布局左右固定,中间自适应是网页中常用到的,实现这种布局的方式有很多种,这里我主要写五种.他们分别是浮动.定位.表格.flexBox.网格. 在这里也感谢一些老师在网上发的免费教程,使我们学习起来更 ...
- 【MFC】基于opencv的趣味相机
为了参加学校的科技节,故用mfc随手制作了一个名为<趣味相机>的小程序: 其中对图形图像处理运用到了opencv. 效果图 这界面逼格低了点╭(╯^╰)╮ 有兴趣的朋友可以在此下载尝试:h ...
- 推荐10个超棒的jQuery工具 提示插件
脚本之家 http://www.jb51.net/article/28525.htm
- Http状态码大全（200、404、500等）
基本涵盖了所有问题 HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源H ...
- salt-master迁移
1.在迁移到的目标机器上先安装salt-master 2.把原master机器上的/etc/salt/pki目录打包发送到迁移的机器上的同等目录下面 3.在原master机器上批量修改minion的配 ...
- C++继承与组合
转自https://blog.csdn.net/caoyan_12727/article/details/52337297 类的组合和继承一样,是软件重用的重要方式.组合和继承都是有效地利用已有类的资 ...