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