使用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

语法规则：

分名称和值对，数据分隔 ： {}保存对象 []保存数组

“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" 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顺利取到数据库数据。

时间： 2024-10-25 14:36:54

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

使用Struts2和jQuery EasyUI实现简单CRUD系统（八）——Struts与EasyUI使用JSON进行交互

由于前面写了的四篇文章压缩得太厉害,还有真正的原理也没有弄通,所以重新写了使用Struts2和jQuery EasyUI实现简单CRUD系统(一).(二)和(三). 知道ajax与struts间用json交互后,那么EasyUI作为一个JQuery的UI插件集合体,JQuery为一个Javascript库,而ajax是异步的js和xml.JQuery的代码里面就是直接用了Ajax,EasyUI也是一样. 不同于<使用Struts2和jQuery EasyUI实现简单CRUD系统(五)--jsp,

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

使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——ajax与struts2的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(三)——ajax,struts2使用json格式的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(四)——基础环境搭建 使用Struts2和jQuery EasyUI实现简单CRU

使用Struts2和jQuery EasyUI实现简单CRUD系统（三）——复选框进行多选删除操作

继上篇的jsp,json,EasyUI的结合顺利将数据库数据转换成json格式后再EasyUI完成展示(Retrieve)之后,接下来的实现增删改功能也很顺手了. 增的功能还是一样,只不过将原本自己写的form用ejui提供form代替而已. 删改功能需要拿到具体选择行的id. <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px;

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

上篇完成多选删除的功能之后,接下来就是做分页功能了.以前的分页是一个麻烦的问题.而且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. 之前自己写分页的时候,分页的界面当然是自己做的,用了ejui之后,真的方便了很多.方便到什么程度了. <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; heig

使用Struts2和jQuery EasyUI实现简单CRUD系统（二）——jsp,json,EasyUI的结合

这部分比较复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,但是一直不知道有什么用,写东西也没用到,所以没去学他.然后现在以这种怀着好奇心,这是做什么用的,这是怎么用的,这是怎么结合的心态去学习,效果很好. 这次用到的EasyUI的数据网格,DataGrid.需用引用一个url传来的json数据,然后整齐美观地展现在页面上.想想自己之前做的东西,就直接拿数据库的数据和html的table代码进行拼接,整洁是整洁,但是代码写得特别别扭.让我站在一个设计者的思路上来看,如果我现在提供了一

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

文件结构 三个jsp文件负责前段界面的实现 login.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <title>My JSP 'login.jsp' starting page</title> <script> function myFuncti

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFileUploader并不华丽,也没有提供美化文件上传控件的css,它并不像jQuery File Upload(喜欢的同学可以去尝试下),提供了美观的样式和专门的图片预览.多任务上传等等, JqueryAjaxFileUploader 所拥有的很简单,只是异步上传文件的功能,当然这并不排除由你亲自为它披

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

技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明确个概念: jQuery是什么:是使用javascript语言开发的,用于满足项目前台各种操作需要的js程序文件.也就是说,jQuery基本上就是个js程序集,基础核心是jQuery.js文件. l        当然根据不同的版本具体的表现形式: jQuery.1.6.js或者jquery-1.5.1.js 这个是版本号的不同,具体有哪些区别,还没发现. l      

Struts2 整合jQuery实现Ajax功能(2)

1.1.1   Action利用struts2-json-plugin-X.X.X.jar响应Json格式信息: 1.      function removerecordbyid(recordid){ 2.              $("#showallrecord table tr").each( 3.              function(){ 4.                var seq=parseInt($( this ).children( "td&