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

痛定思痛。 2022-08-08 15:51 142阅读 0赞

由于前面写了的四篇文章压缩得太厉害，还有真正的原理也没有弄通，所以重新写了使用Struts2和jQuery EasyUI实现简单CRUD系统（一）、（二）和（三）。

知道ajax与struts间用json交互后，那么EasyUI作为一个JQuery的UI插件集合体，JQuery为一个Javascript库，而ajax是异步的js和xml。JQuery的代码里面就是直接用了Ajax，EasyUI也是一样。

不同于《[使用Struts2和jQuery EasyUI实现简单CRUD系统（五）——jsp,json,EasyUI的结合][Struts2_jQuery EasyUI_CRUD_jsp_json_EasyUI] 》,由于前面用了struts的json插件，这次也将继续使用，不再做多一次页面跳转。

还有这次说明一下其中DataGrid的json格式要求。

直接参考《[使用Struts2和jQuery EasyUI实现简单CRUD系统（三）——ajax,struts2使用json格式的交互][Struts2_jQuery EasyUI_CRUD_ajax_struts2_json]》

根据EasyUI直接写个表格页面，EasyUI\_DataGrid.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Panel Tools - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css"
    	href="js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/demo/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    </head>
    <body>
        <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
        		url="ajaxaction"
        		toolbar="#toolbar"
        		rownumbers="true"
        		fitColumns="true" 
        		singleSelect="true">
        	<thead>
        		<tr>
        			<th field="name" width="50">Name</th>
        			<th field="phone" width="50">Phone</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>
    </body>
    </html>

根据官方教程——[http://www.jeasyui.com/tutorial/app/crud.php][http_www.jeasyui.com_tutorial_app_crud.php]中的php

$rs = mysql_query('select * from users');
    $result = array();
    while($row = mysql_fetch_object($rs)){
        array_push($result, $row);
    }
     
    echo json_encode($result);

大概可以推出使用java的action类该怎么传输数据，AjaxAction.java

package action;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import net.sf.json.JSONObject;
    
    import org.apache.struts2.ServletActionContext;
    import com.opensymphony.xwork2.Action;
    
    public class AjaxAction implements Action{
    	private JSONObject jsonresult;
    	
    	public String json() throws Exception {
    		System.out.println("action execute");
    		
    		Map<String,Object> map = new HashMap<String,Object>();
    		map.put("name","xiaoming");
    		map.put("phone","3349249");
    		
    		jsonresult = JSONObject.fromObject(map);
    		System.out.println("json");
    		
    		return SUCCESS;
    	}
    	@Override
    	public String execute() throws Exception {
    		return null;
    	}
    	
    	public JSONObject getJsonresult() {
    		return jsonresult;
    	}
    	public void setJsonresult(JSONObject jsonresult) {
    		this.jsonresult = jsonresult;
    	}
    }

这里将前面文章AjaxAction属性里面的类型改为JSONObject，因为String类型的时候，json串里面的字符串都用了转义字符\\。

即使这样，我们会发现表格加载不出数据。

而且报的是Uncaught TypeError: Cannot read property 'length' of undefined 错误，点击之后发现很奇怪的是，

![Center][]

看不出什么错，php又没有传输rows这样的字段。

搞了很久之后，我直接访问了view-source:http://www.jeasyui.com/tutorial/app/crud/get\_users.php。

发现数据根本不是简单的json格式

{"total":"6","rows":[{"id":"26561","firstname":"1","lastname":"23","phone":"242","email":"1@163.com"},{"id":"26562","firstname":"2","lastname":"42","phone":"4231","email":"1@163.com"},{"id":"26563","firstname":"54345","lastname":"52","phone":"52","email":"1@163.com"},{"id":"26564","firstname":"42","lastname":"36","phone":"543","email":"1@163.com"},{"id":"26565","firstname":"42","lastname":"36","phone":"543","email":"1@163.com"},{"id":"26566","firstname":"54345","lastname":"52","phone":"52","email":"1@163.com"}]}

这不是明摆着坑人吗？

然后我直接下了demo的源码，打开php一看：

<?php
    	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    	$offset = ($page-1)*$rows;
    	$result = array();
    
    	include 'conn.php';
    	
    	$rs = mysql_query("select count(*) from users");
    	$row = mysql_fetch_row($rs);
    	$result["total"] = $row[0];
    	$rs = mysql_query("select * from users limit $offset,$rows");
    	
    	$items = array();
    	while($row = mysql_fetch_object($rs)){
    		array_push($items, $row);
    	}
    	$result["rows"] = $items;
    	echo json_encode($result);
    ?>

加了total和rows这些东西。但是官方文档并没有写好，就这样被坑了。现在反过来考虑一下如何将这样的json格式用java实现。

可以用Map放入total和rows，rows里面又是json，一个数据有两个字段name和phone，那么其实这样一个数据也需要用map存储，那么rows要将这么多map存起来，其实用list或者数组就可以了。

所以重新写一下AjaxAction类

package action;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import net.sf.json.JSONObject;
    
    import org.apache.struts2.ServletActionContext;
    import com.opensymphony.xwork2.Action;
    
    public class AjaxAction implements Action{
    	private JSONObject jsonresult;
    	
    	public String json() throws Exception {
    		System.out.println("action execute");
    		
    		List list = new ArrayList<>();
    		Map<String,Object> map = new HashMap<String,Object>();
    		Map<String,Object> map2 = new HashMap<String,Object>();
    		map.put("name","xiaoming");
    		map.put("phone","3349249");
    		
    		map2.put("name","xiaoxin");
    		map2.put("phone","3339589");
    		
    		list.add(map);
    		list.add(map2);
    		
    		Map<String,Object> jsontemp = new HashMap<String,Object>();
    		jsontemp.put("total",list.size());
    		jsontemp.put("rows", list);
    		jsonresult = JSONObject.fromObject(jsontemp);
    		System.out.println("json");
    		
    		return SUCCESS;
    	}
    	@Override
    	public String execute() throws Exception {
    		return null;
    	}
    	
    	public JSONObject getJsonresult() {
    		return jsonresult;
    	}
    	public void setJsonresult(JSONObject jsonresult) {
    		this.jsonresult = jsonresult;
    	}
    }

转换后的json格式会是：

{"total":2,"rows":[{"phone":"3349249","name":"xiaoming"},{"phone":"3339589","name":"xiaoxin"}]}

最后正常显示：

![Center 1][]

其实是官方的demo写的太简单，没意识对需要的数据格式。其实api里面也有说明：

Return the filtered data to display. The function take one parameter 'data' that indicate the original data. You can change original source data to standard data format. This function must return standard data object that contain 'total' and 'rows' properties.

虽然网上例子很多，但是要真正搞懂为什么这样传参数，整个json与EasyUI之间是怎么交互的，全部理清之后，后续写起代码就很快了。

这回有代码了：

[http://download.csdn.net/detail/iaiti/9120345][http_download.csdn.net_detail_iaiti_9120345]

[Struts2_jQuery EasyUI_CRUD_jsp_json_EasyUI]: http://blog.csdn.net/iaiti/article/details/40982495
[Struts2_jQuery EasyUI_CRUD_ajax_struts2_json]: http://blog.csdn.net/iaiti/article/details/48550073
[http_www.jeasyui.com_tutorial_app_crud.php]: http://www.jeasyui.com/tutorial/app/crud.php
[Center]: /images/20220731/77cd6c542dcb4cb2919e092a88d0114e.png
[Center 1]: /images/20220731/0e0463145796498da6185c45c5c83591.png
[http_download.csdn.net_detail_iaiti_9120345]: http://download.csdn.net/detail/iaiti/9120345