ssh项目中ajax与json之二级下拉菜单级联操作

最近在做一个项目，用到了二级下拉菜单，当你选到一级下拉菜单时，二级菜单会根据一级菜单内容特定显示相关的内容。如图：

这里我首先想到了ajax异步提交，一级菜单id，后台根据Id获取该目录下的二级菜单列表，然后回传前台。思路很清晰，但实施起来却要人老命啊。ajax提交回传单一数据还好，直接就能取值了，但是现在是将List集合存入json中，这足够让我头大，我在网上搜索了大量的这方面的内容，大家写的简直四乱的不要不要的，但是，list存入json的思路却是众口一致，这里我总结了一下，在原有的基础上进行了调整。附上源码：

2.strust2中的action实现方法：

/* * 利用ajax提交后台id，将二级菜单列表存储到json中2017.08.13 miki */public String show()throws Exception{HttpServletResponse response=ServletActionContext.getResponse();if(categoryId>0){System.out.println("父Id为"+categoryId); response.setContentType("text/json"); // 回传内容设为json格式 2017.08.13 miki             response.setCharacterEncoding("UTF-8");    /*设置字符集为'UTF-8'，不然从数据库取中文数据时显示到前端，会乱码*/                //根据一级菜单选中的Id，得到对应的二级列表menuList=menuService.getMenuListBycategoryId(categoryId);//以jsonArray数据形式存入json中JSONArray menus=JSONArray.fromObject(menuList);/* * response顾名思义就是服务器对浏览器的相应，PrintWriter它的实例就是向前台的JSP页面输出结果 */PrintWriter out=response.getWriter();out.print(menus.toString());out.flush();out.close();}return null;

3.struts.xml文件配置：

 <!-- 即使采用json前后台交互，也要定义Comment的Action映射，不然struts拦截器拦截不到  2017.08.08 miki -->         <action name="Comment_*" class="miki.action.shop.CommentAction" method="{1}">                  </action>                  <action name="Operate_*" class="miki.action.shop.OperateAction" method="{1}">                  </action>                  <action name="Menu_*" class="miki.action.shop.MenuAction" method="{1}">                  </action>

4. jsp中的select选择框：

 <li>                  <label>所属分类：</label>                  <select id="category" name="source.category.id" class="select category-1" onchange= "change()">                  <option value="0">请选择</option>                  <c:forEach  items="${categoryList }" var="category"><option value="${category.id }" ${curCategory.id==category.id?'selected':'' }>${category.name }</option>  </c:forEach>                  </select>                                     <select id="sel_subclass" style="display:" name="source.menu.id">  <option value="0">请选择</option>    </select>   <em></em>                                                </li>

5.js中获取json中的list，将其遍历显示到页面select选择框中去：

选择一级菜单时，会触发onchange中的change函数，然后将选中的id获取，ajax提交到后台，

 //二级菜单显示  miki 2017.08.13    function change() {  var categoryId=$("#category").val();//获取select选中的一级菜单id  var tbody=window.document.getElementById("sel_subclass");//获取select选择框元素 2017.08.13 miki    $.ajax({      type: "post",      dataType: "json",      url: "Menu_show.action",      data: {     categoryId:categoryId  },  //将categoryId封装到data中success: function (msg) { //自定义function回传函数，msg对应action中的json对象menus    if (msg.length>0) {  //遍历msg中的数据，将其打印到select的option标签中        var str = "";                   for (var key in msg) {                            str += "<option value="+ msg[key].id+" ${curMenu.id==menu.id?'selected':'' }>" +msg[key].name+ "</option>";                             }                   tbody.innerHTML = str;                              }              },              error: function () {                  alert("查询失败")              }          });    }  

6. 完美执行，虽然是一个小小的二级菜单级联操作，但是用到了很多知识，同时也让我巩固了ajax方面的技术：