Spring 框架下Controller 返回结果在EasyUI显示

这几天弄了一下java下的在后台返回数据到jsp页面上的显示：

总结一下：

首先后台方面：

 1 @RequestMapping(value="/searchByUserName")
 2     @ResponseBody
 3      public String searchByUserName(HttpServletRequest request,HttpServletResponse reponse ){
 4         String userName = request.getParameter("userName");
 5         /*JSONArray json = new JSONArray(adminService.findByUsername(userName));
 6         //Map<String, Object> result=new HashMap<String, Object>();
 7         return json.toString();*/
 8         List<Admin> admin = adminService.findByUsername(userName);
 9         List<HashMap<String,Object>> list = new ArrayList<HashMap<String,Object>>();
10         int i;
11         for (i=0; i < admin.size(); i++){
12         Map<String,Object> result=new HashMap<String,Object>();
13             if (admin != null){
14                 System.out.println(admin.get(i).getUserName());
15                 result.put("userName", admin.get(i).getUserName());
16                 result.put("roleName", admin.get(i).getRoleName());;
17                 result.put("telphone", admin.get(i).getTelphone());
18                 result.put("email", admin.get(i).getEmail());
19                 if (admin.get(i).getSex() == 1){
20                     result.put("sex","男" );
21                 } else {
22                     result.put("sex","女" );
23                 }
24                 result.put("createtime", admin.get(i).getCreateTime().toGMTString());
25                 list.add((HashMap<String, Object>) result);
26             }
27         }
28         JSONArray  jsonArrayt= JSONArray.fromObject(list);
29         System.out.println(jsonArrayt.toString());
30         return jsonArrayt.toString();
31     }

后台返回的数据类型是Json格式的，Json是什么呢？没仔细研究，个人理解大概就是一个String ，有着固定的格式和一些属性吧

接下来看jsp这边：

用jquery向后台发出请求，网上面很多都是php的，java也类似，刚开始弄有点麻烦

  1 function doSearch(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //处理的是返回JSONArray
  2     userName = $("#itemid").val();　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//获取搜索框中的内容
  3     var urlRequest="http://localhost:8080/account/searchByUserName?userName="+userName;　　　//请求路径，可以写成相对的吧
  4     $.getJSON(urlRequest, null, function(json) {　　　　　　　　　　　　　　　　　　　　　　　　　　//json是返回的结果，即java后台返回的String，这里是Object对象
  5                 /* $(function(){ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//处理单个的
  6                     ccb={total:json.length,rows:[json[0]]};
  7                      $("#tt").datagrid(‘loadData‘, ccb);
  8                     alert(‘here‘);
  9                     });  */
  10                    $("#tt").datagrid(‘loadData‘, {   　　　　　　　　　　　　　　　　　　　　　　　//加载数据到表格
 11                         "total": json.length,
 12                         "rows": json
 13                     });
 14             });
 15     }

 1 <table id="tt" class="easyui-datagrid" style="width:1100px;height:500px"
 2             title="Searching" iconCls="icon-search" toolbar="#tb"
 3             rownumbers="true" pagination="true">
 4         <thead>
 5             <tr>
 6                 <th field="userName" width="100">用户名</th>　　　　　　　　　　　　　　　　//这里的field和java后台的Json格式数据对应即可显示
 7                 <th field="roleName" width="100">角色名</th>
 8                 <th field="telphone" width=100" >电话</th>
 9                 <th field="email" width="100" >邮件</th>
10                 <th field="sex" width="50">性别</th>
11                 <th field="createtime" width="160" align="center">账户创建时间</th>
12             </tr>
13         </thead>
14     </table>
15     <div id="tb" style="padding:3px">
16         <span>用户名:</span>
17         <input id="itemid" style="line-height:26px;border:1px solid #ccc">
18         <span>角色名:</span>
19         <input id="productid" style="line-height:26px;border:1px solid #ccc">
20         <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a>
21     </div>

这样就可以在easyUi上面显示数据了。