关于Struts传递json给easyui的随笔

今天在公司写测试代码，由于公司用的是ssh框架做的商城项目，我想先实现下简单的增删改查，奈何没有很好的后台页面(毕竟不能测试代码直接在他的项目里改啊)

所以想到了淘淘商城中有这个后台的管理页面，打算一试，奈何struts没学好，琢磨好几小时如何把json数据回传给easyui的页面，这里还是推荐大家用谷歌

后台页面使用的是easyui，直接放其中Customer添加页面和后台action的代码吧

customer-add.jsp

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <link
  4     href="${fileUrlConfig.fileServiceUploadRoot}/zcg/js/kindeditor-4.1.10/themes/default/default.css"
  5     type="text/css" rel="stylesheet">
  6 <script type="text/javascript" charset="utf-8"
  7     src="${fileUrlConfig.fileServiceUploadRoot}/zcg/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
  8 <script type="text/javascript" charset="utf-8"
  9     src="${fileUrlConfig.fileServiceUploadRoot}/zcg/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
 10 <div style="padding:10px 10px 10px 10px">
 11     <!-- 这是个需要提交的表单，可以用来增加商品 -->
 12     <form id="itemAddForm" class="itemForm" method="post">
 13         <table cellpadding="5">
 14             <!--  <tr>
 15                 <td>商品类目:</td>
 16                 <td>
 17                     <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
 18                     <input type="hidden" name="cid" style="width: 280px;"></input>
 19                 </td>
 20             </tr> -->
 21             <tr>
 22                 <td>登录用户名:</td>
 23                 <td><input class="easyui-textbox" type="text" name="loginName"
 24                     data-options="required:true" style="width: 280px;"></input></td>
 25             </tr>
 26             <tr>
 27                 <td>用户密码:</td>
 28                 <td><input class="easyui-textbox" type="password"
 29                     name="password" data-options="required:true" style="width: 280px;"></input></td>
 30             </tr>
 31             <tr>
 32                 <td>昵称：</td>
 33                 <td><input class="easyui-textbox" type="text" name="nickName"
 34                     data-options="required:true" style="width: 280px;"></input></td>
 35             </tr>
 36             <tr>
 37                 <td>手机号：</td>
 38                 <td><input class="easyui-textbox" type="text" name="phone"
 39                     data-options="required:true" style="width: 280px;"></input></td>
 40             </tr>
 41             <tr>
 42                 <td>邮箱：</td>
 43                 <td><input class="easyui-textbox" type="text" name="email"
 44                     data-options="required:true" style="width: 280px;"></input></td>
 45             </tr>
 46             <tr>
 47                 <td>头像地址：</td>
 48                 <td><input class="easyui-textbox" type="text" name="photoUrl"
 49                     data-options="required:true" style="width: 280px;"></input></td>
 50             </tr>
 51             <!-- <tr>
 52                 <td>上传头像:</td>
 53                 <td><a href="javascript:void(0)"
 54                     class="easyui-linkbutton picFileUpload">上传图片</a> <input
 55                     type="hidden" name="image" /></td>
 56             </tr> -->
 57             <tr>
 58                 <td style="text-align:left;">会员类型：</td>
 59                 <td style="text-align:left">
 60                     <span class="radioSpan"> 
 61                         <input type="radio" name="type" value="1">采购商</input>
 62                         <input type="radio" name="type" value="2">供应商</input>
 63                     </span>
 64                 </td>
 65             </tr>
 66             <tr>
 67                 <td style="text-align:left;">分享类型：</td>
 68                 <td style="text-align:left">
 69                     <span class="radioSpan"> 
 70                         <input type="radio" name="shareType" value="1">普通会员</input>
 71                         <input type="radio" name="shareType" value="2">超级终端</input>
 72                         <input type="radio" name="shareType" value="3">个人分销商</input>
 73                         <input type="radio" name="shareType" value="4">县市分销商</input>
 74                         <input type="radio" name="shareType" value="5">省级分销商</input>
 75                         <input type="radio" name="shareType" value="6">操盘手(店铺代运营)</input>
 76 
 77                     </span>
 78                 </td>
 79             </tr>
 80             <tr>
 81                 <td style="text-align:left;">商品交易状态：</td>
 82                 <td style="text-align:left">
 83                     <span class="radioSpan"> 
 84                         <input type="radio" name="isCanBuy" value="1">可以采购</input>
 85                         <input type="radio" name="isCanBuy" value="2">不采购</input>
 86                     </span>
 87                 </td>
 88             </tr>
 89             <tr>
 90                 <td>支付密码:</td>
 91                 <td><input class="easyui-textbox" type="password"
 92                     name="payPassword" data-options="required:true" style="width: 280px;"></input></td>
 93             </tr>
 94             <tr>
 95                 <td>微信公众号：</td>
 96                 <td><input class="easyui-textbox" type="text" name="openid"
 97                     data-options="required:true" style="width: 280px;"></input></td>
 98             </tr>
 99         </table>
100         <input type="hidden" name="itemParams" />
101     </form>
102     <div style="padding:5px">
103         <a href="javascript:void(0)" class="easyui-linkbutton"
104             onclick="submitForm()">提交</a> <a href="javascript:void(0)"
105             class="easyui-linkbutton" onclick="clearForm()">重置</a>
106             
107     </div>
108 </div>
109 <script type="text/javascript">
110     //提交表单
111     function submitForm() {
112         debugger;
113         //有效性验证
114         if (!$('#itemAddForm').form('validate')) {
115             $.messager.alert('提示', '表单还未填写完成!');
116             return;
117         }
118         $.post("/zcg/customersave.action", $("#itemAddForm").serialize(), function(data) {
119             if (data.status == 200) {
120                 $.messager.alert('提示', '新增用户成功!');
121             }
122         });
123     }
124 
125     function clearForm() {
126         $('#itemAddForm').form('reset');
127         itemAddEditor.html('');
128     }
129 </script>

如上述代码可见，我这里使用了ajax提交了表单之后等待后台回传个带有状态码的json数据，这样就能调用easyui页面中的ajax响应弹窗，从而完成交互

但是在网上查了好久都没找到几个靠谱的方法，要么讲的太乱……

action的代码

 1 package shop.hellxz.action;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.HashMap;
 6 import java.util.Map;
 7 
 8 import javax.json.Json;
 9 
10 import org.apache.struts2.json.JSONUtil;
11 import org.springframework.web.bind.annotation.ResponseBody;
12 
13 import com.alibaba.fastjson.JSON;
14 
15 import cn.emay.slf4j.helpers.Util;
16 import shop.zhangchenguang.pojo.Customer2;
17 import shop.zhangchenguang.service.CustomerService;
18 import util.action.BaseAction;
19 import util.other.Utils;
20 
21 /**
22  * 测试代码Action
23  * @author Hellxz
24  *
25  */
26 public class CustomerAction extends BaseAction{
27 
28     //注入service层
29     private CustomerService customerServiceImpl;
30     //需要写get、set方法
31     public CustomerService getCustomerServiceImpl() {
32         return customerServiceImpl;
33     }
34     public void setCustomerServiceImpl(CustomerService customerServiceImpl) {
35         this.customerServiceImpl = customerServiceImpl;
36     }
37     //跳转到主页
38     public String index() throws IOException{
39         return "success";
40     }
41     //保存用户信息
42     public void customerSave() throws IOException{
43         //获取输出流
44         response.setContentType("json/application;charset=UTF-8");
45         PrintWriter out = response.getWriter();
46         //获取传入数据对象
47         Customer2 customer = new Customer2();
48         customer.setLoginName(request.getParameter("loginName"));
49         customer.setPassword(request.getParameter("password"));
50         customer.setNickName(request.getParameter("nickName"));
51         customer.setPhone(request.getParameter("phone"));
52         customer.setEmail(request.getParameter("email"));
53         customer.setPhotoUrl(request.getParameter("photoUrl"));
54         customer.setType(Integer.parseInt(request.getParameter("type")));
55         customer.setShareType(Integer.parseInt(request.getParameter("shareType")));
56         customer.setIsCanBuy(Integer.parseInt(request.getParameter("isCanBuy")));
57         customer.setPayPassword(request.getParameter("payPassword"));
58         customer.setOpenId(request.getParameter("openid"));
59         //补全数据……还没写
60         //调用service保存对象
61         Object obj = customerServiceImpl.saveOrUpdateObject(customer);
62         /**
63          * 如果保存的对象是非空的，那么已经保存成功
64          * 如果为空，则保存失败
65          * 无论保存成功那个与否，都要把json对象写回给客户端，进行判断
66          */
67         if(Utils.objectIsNotEmpty(obj)){
68             out.println(JSON.toJSONString(checkOK()));
69         }else{
70             out.println(JSON.toJSONString(checkFail()));
71         }
72     }
73      /**
74       * @return json对象状态200
75       */
76     @SuppressWarnings({"unchecked","rawtypes"})
77     public Object checkOK(){
78         Map m = new HashMap<>();
79         m.put("status", 200);
80         m.put("msg", "添加成功");
81         m.put("data", null);
82         return m;
83     }
84     /**
85      * @return json对象状态500
86      */
87     @SuppressWarnings({"unchecked","rawtypes"})
88     public Object checkFail(){
89         Map m = new HashMap<>();
90         m.put("status", 500);
91         m.put("msg", "添加失败");
92         m.put("data", null);
93         return m;
94     }
95     
96 }

附上struts的配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
        "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="zcg" namespace="/zcg" extends="basePackage">
        <action name="index" class="shop.hellxz.action.CustomerAction"  method="index">
            <interceptor-ref name="baseStack"/>
            <result name="success">/WEB-INF/hellxz/jsp/index.jsp</result>
        </action>
        <action name="*-*" class="shop.hellxz.action.SendAction">
            <result name="send">/WEB-INF/hellxz/jsp/{1}-{2}.jsp</result>
        </action>
        <action name="customersave" class="shop.hellxz.action.CustomerAction" method="customerSave">
            
        </action>
    </package>
</struts>

到这里大家可能明白是怎么实现的了，老规矩捋一下流程：

1、在struts配置文件中让表单提交的请求响应到action中，不需要定义result，

2、响应进来之后，我们定义的方法需要设置void返回值，在方法体就可以通过老办法 request.getParameter()方法获取这些表单中的参数，然后放到pojo中持久化

3、持久化成功会返回一个新的对象，判断这个对象是否为空，然后通过这个结果来对应应该用到的检查方法，这里使用了alibaba的Fastjson中的JSON对象的toJsonString()方法来实现把对象转换成json串

4、通过response.getWriter()方法拿到的输出流，我们使用println()方法打印出来那个json串给浏览器端

5、浏览器端的ajax收到带有状态码200的json串，弹窗提示用户存储成功

说着简单，其实就是jsp和servlet时候常用的方法，springmvc用习惯了，反而忘了最基本的方法，罪过罪过。