关于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=" 280px;"></input>
                </td>
            </tr> -->
            <tr>
                <td>登录用户名:</td>
                <td><input class="easyui-textbox" type="text" name="loginName"
                    data-options="required:true" style=" 280px;"></input></td>
            </tr>
            <tr>
                <td>用户密码:</td>
                <td><input class="easyui-textbox" type="password"
                    name="password" data-options="required:true" style=" 280px;"></input></td>
            </tr>
            <tr>
                <td>昵称：</td>
                <td><input class="easyui-textbox" type="text" name="nickName"
                    data-options="required:true" style=" 280px;"></input></td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td><input class="easyui-textbox" type="text" name="phone"
                    data-options="required:true" style=" 280px;"></input></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input class="easyui-textbox" type="text" name="email"
                    data-options="required:true" style=" 280px;"></input></td>
            </tr>
            <tr>
                <td>头像地址：</td>
                <td><input class="easyui-textbox" type="text" name="photoUrl"
                    data-options="required:true" style=" 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=" 280px;"></input></td>
            </tr>
            <tr>
                <td>微信公众号：</td>
                <td><input class="easyui-textbox" type="text" name="openid"
                    data-options="required:true" style=" 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用习惯了，反而忘了最基本的方法，罪过罪过。