servlet+json+ajax集成

模拟下拉列表二级菜单联动

       

1、页面

       <tr>
          <td align="right"><font color="red">*</font>一级服务类型：</td>
          <td>
             <select name="dept" id="dept" onchange="loadDeptChild(this.options[this.options.selectedIndex].value)"/>
                <option value="0">请选择...</option>
                <c:forEach items="${depts}" var="dept">
                   <option value ="${dept.id }">${dept.name }</option>
                </c:forEach>
             </select>
             <span style="color:red">${errDept}</span>
          </td>
       </tr>
       <tr>
          <td align="right">二级服务类型：</td>
          <td>
             <select name="deptChild" id="deptChild">
                <option value="0">请选择...</option>
             </select>
          </td>
       </tr>

           

2、js

function loadDeptChild(dept){
   var url="servlet/CustomerServlet?action=loadDeptChild&dept="+dept;
   $.get(url, null, function(data){
       var objs=eval("("+data+")"); //解析json对象
       var deptChild=$("#deptChild");
       deptChild.empty(); //初始化否则会追加 
       deptChild.append("<option value='0'>请选择...</option>");
       for(var i=0;i<objs.length;i++){
           deptChild.append("<option value='"+objs[i].id+"'>"+objs[i].name+"</option>");
       }
   });
}

    

3、servlet

    /**
     * 实现服务类型select二级联动
     * 
     * @throws ServletException
     * @throws IOException
     */
    public void loadDeptChild() throws ServletException, IOException {
        // 设置页面utf-8编码
        // response.setContentType("text/html;charset=utf-8");
        // 可以自动识别为Json对象，否则eval解析json无效
        response.setContentType("application/x-javascript;charset=UTF-8");
        PrintWriter out = response.getWriter();
        
        
        Integer dept = Integer.parseInt(request.getParameter("dept"));
        List<Dictionary> models = customerDao.getDeptChilds(dept);
        if (models != null && models.size() > 0) {
            //构造json对象
            StringBuffer json = new StringBuffer();
            json.append("[");
            for (Dictionary model : models) {
                json.append('{');
                json.append("id:").append(model.getId()).append(",");
                json.append("name:").append("'").append(model.getName().trim()).append("'");
                json.append("},");
            }
            json.deleteCharAt(json.length() - 1);
            json.append("]");
            out.println(json.toString());
            out.close();
        } else {
            out.println("[{id:0,name:''}]");
            out.close();
        }
    }