关于Struts传递json给easyui的随笔

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

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

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

customer-add.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <link
     href="${fileUrlConfig.fileServiceUploadRoot}/zcg/js/kindeditor-4.1.10/themes/default/default.css"
     type="text/css" rel="stylesheet">
 <script type="text/javascript" charset="utf-8"
     src="${fileUrlConfig.fileServiceUploadRoot}/zcg/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
 <script type="text/javascript" charset="utf-8"
     src="${fileUrlConfig.fileServiceUploadRoot}/zcg/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
 <div style="padding:10px 10px 10px 10px">
     <!-- 这是个需要提交的表单，可以用来增加商品 -->
     <form id="itemAddForm" class="itemForm" method="post">
         <table cellpadding="5">
             <!--  <tr>
                 <td>商品类目:</td>
                 <td>
                     <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                     <input type="hidden" name="cid" style="width: 280px;"></input>
                 </td>
             </tr> -->
             <tr>
                 <td>登录用户名:</td>
                 <td><input class="easyui-textbox" type="text" name="loginName"
                     data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <tr>
                 <td>用户密码:</td>
                 <td><input class="easyui-textbox" type="password"
                     name="password" data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <tr>
                 <td>昵称：</td>
                 <td><input class="easyui-textbox" type="text" name="nickName"
                     data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <tr>
                 <td>手机号：</td>
                 <td><input class="easyui-textbox" type="text" name="phone"
                     data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <tr>
                 <td>邮箱：</td>
                 <td><input class="easyui-textbox" type="text" name="email"
                     data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <tr>
                 <td>头像地址：</td>
                 <td><input class="easyui-textbox" type="text" name="photoUrl"
                     data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <!-- <tr>
                 <td>上传头像:</td>
                 <td><a href="javascript:void(0)"
                     class="easyui-linkbutton picFileUpload">上传图片</a> <input
                     type="hidden" name="image" /></td>
             </tr> -->
             <tr>
                 <td style="text-align:left;">会员类型：</td>
                 <td style="text-align:left">
                     <span class="radioSpan">
                         <input type="radio" name="type" value="1">采购商</input>
                         <input type="radio" name="type" value="2">供应商</input>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td style="text-align:left;">分享类型：</td>
                 <td style="text-align:left">
                     <span class="radioSpan">
                         <input type="radio" name="shareType" value="1">普通会员</input>
                         <input type="radio" name="shareType" value="2">超级终端</input>
                         <input type="radio" name="shareType" value="3">个人分销商</input>
                         <input type="radio" name="shareType" value="4">县市分销商</input>
                         <input type="radio" name="shareType" value="5">省级分销商</input>
                         <input type="radio" name="shareType" value="6">操盘手（店铺代运营）</input>

                     </span>
                 </td>
             </tr>
             <tr>
                 <td style="text-align:left;">商品交易状态：</td>
                 <td style="text-align:left">
                     <span class="radioSpan">
                         <input type="radio" name="isCanBuy" value="1">可以采购</input>
                         <input type="radio" name="isCanBuy" value="2">不采购</input>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td>支付密码:</td>
                 <td><input class="easyui-textbox" type="password"
                     name="payPassword" data-options="required:true" style="width: 280px;"></input></td>
             </tr>
             <tr>
                 <td>微信公众号：</td>
                 <td><input class="easyui-textbox" type="text" name="openid"
                     data-options="required:true" style="width: 280px;"></input></td>
             </tr>
         </table>
         <input type="hidden" name="itemParams" />
     </form>
     <div style="padding:5px">
         <a href="javascript:void(0)" class="easyui-linkbutton"
             onclick="submitForm()">提交</a> <a href="javascript:void(0)"
             class="easyui-linkbutton" onclick="clearForm()">重置</a>

     </div>
 </div>
 <script type="text/javascript">
     //提交表单
     function submitForm() {
         debugger;
         //有效性验证
         if (!$('#itemAddForm').form('validate')) {
             $.messager.alert('提示', '表单还未填写完成!');
             return;
         }
         $.post("/zcg/customersave.action", $("#itemAddForm").serialize(), function(data) {
             if (data.status == 200) {
                 $.messager.alert('提示', '新增用户成功!');
             }
         });
     }

     function clearForm() {
         $('#itemAddForm').form('reset');
         itemAddEditor.html('');
     }
 </script>

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

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

action的代码

 package shop.hellxz.action;

 import java.io.IOException;
 import java.io.PrintWriter;
 import java.util.HashMap;
 import java.util.Map;

 import javax.json.Json;

 import org.apache.struts2.json.JSONUtil;
 import org.springframework.web.bind.annotation.ResponseBody;

 import com.alibaba.fastjson.JSON;

 import cn.emay.slf4j.helpers.Util;
 import shop.zhangchenguang.pojo.Customer2;
 import shop.zhangchenguang.service.CustomerService;
 import util.action.BaseAction;
 import util.other.Utils;

 /**
  * 测试代码Action
  * @author Hellxz
  *
  */
 public class CustomerAction extends BaseAction{

     //注入service层
     private CustomerService customerServiceImpl;
     //需要写get、set方法
     public CustomerService getCustomerServiceImpl() {
         return customerServiceImpl;
     }
     public void setCustomerServiceImpl(CustomerService customerServiceImpl) {
         this.customerServiceImpl = customerServiceImpl;
     }
     //跳转到主页
     public String index() throws IOException{
         return "success";
     }
     //保存用户信息
     public void customerSave() throws IOException{
         //获取输出流
         response.setContentType("json/application;charset=UTF-8");
         PrintWriter out = response.getWriter();
         //获取传入数据对象
         Customer2 customer = new Customer2();
         customer.setLoginName(request.getParameter("loginName"));
         customer.setPassword(request.getParameter("password"));
         customer.setNickName(request.getParameter("nickName"));
         customer.setPhone(request.getParameter("phone"));
         customer.setEmail(request.getParameter("email"));
         customer.setPhotoUrl(request.getParameter("photoUrl"));
         customer.setType(Integer.parseInt(request.getParameter("type")));
         customer.setShareType(Integer.parseInt(request.getParameter("shareType")));
         customer.setIsCanBuy(Integer.parseInt(request.getParameter("isCanBuy")));
         customer.setPayPassword(request.getParameter("payPassword"));
         customer.setOpenId(request.getParameter("openid"));
         //补全数据……还没写
         //调用service保存对象
         Object obj = customerServiceImpl.saveOrUpdateObject(customer);
         /**
          * 如果保存的对象是非空的，那么已经保存成功
          * 如果为空，则保存失败
          * 无论保存成功那个与否，都要把json对象写回给客户端，进行判断
          */
         if(Utils.objectIsNotEmpty(obj)){
             out.println(JSON.toJSONString(checkOK()));
         }else{
             out.println(JSON.toJSONString(checkFail()));
         }
     }
      /**
       * @return json对象状态200
       */
     @SuppressWarnings({"unchecked","rawtypes"})
     public Object checkOK(){
         Map m = new HashMap<>();
         m.put("status", 200);
         m.put("msg", "添加成功");
         m.put("data", null);
         return m;
     }
     /**
      * @return json对象状态500
      */
     @SuppressWarnings({"unchecked","rawtypes"})
     public Object checkFail(){
         Map m = new HashMap<>();
         m.put("status", 500);
         m.put("msg", "添加失败");
         m.put("data", null);
         return m;
     }

 }

附上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用习惯了，反而忘了最基本的方法，罪过罪过。