JSP与Ajax实现动态加载-CSDN博客

本文链接：https://blog.csdn.net/Dear_bequiet/article/details/38371871

JSP页面：

<SCRIPT type="text/javascript">
       function changeDepart(){
           var zoneNumber=$("#zoneSelect").val();
           var url="${pageContext.request.contextPath}/basic/dustbin/dustbin_selectDepartByZone.action";
           $.ajax({
              url:url,
              data:{"zoneNumber":zoneNumber},
              dataType:"json",
              type:"post",
              error:function(){
               alert("error");
              },
              success:onchangecallback
           });
       }
      function onchangecallback(data){
   document.getElementById("departSelect").options.length = 0; //清空原有的option
   var str="<option value='00000'>请选择</option>";
   for(var i=0;i<data.length;i++){
     str+="<option value='"+data[i].departNumber+"'>"+data[i].departName+"</option>";
   }
   $("#departSelect").html(str);
      }

    </SCRIPT>

<body>
    <div class="main_right">
   <div class="right_top clear"><img src="${pageContext.request.contextPath }/easytogo/images/main_14.jpg" width="15" height="10" /> 垃圾箱基础信息管理界面</div>
   <div id="left" align="left" style="font-size: 12px;margin-left: 20px;">
      区域：<s:select id="zoneSelect" list="zoneList" listKey="zoneNumber" listValue="zoneName" onchange="changeDepart();" headerKey="0" headerValue="请选择"></s:select>
      部门：<select id="departSelect">
          <option>请选择</option>
        </select>
   </div>
   <div id="showStatusByGroups" style="float: left;width:85%" >
     <iframe id="showStatus" src="" width="100%" height="300px" frameborder="0"></iframe>
   </div>

</div>
</body>

后台action:

public void selectDepartByZone(){
  try {
   System.out.println("测试一下："+zoneNumber);
   departList = departDAO.getDepartList(zoneNumber);
   System.out.println("列表集合："+departList);
   JSONArray jsonObj = new JSONArray();;//;//组装成json数据
   for(int i=0;i<departList.size();i++) {
   JSONObject obj = new JSONObject();
    Map list = departList.get(i);
    obj.put("departNumber", list.get("departNumber"));
    obj.put("departName", list.get("departName"));
    jsonObj.add(obj);
   }
   print(jsonObj.toString());
  } catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
}

JSP二级联动菜单