<!-- 导入jquey库文件 --> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript"> //使用Ajax结合Jquery+后台Json 实现联动菜单 //使用Jquery进行Ajax代码的简化 function showCity(province){ //4个参数类型分别为:提交路径,传递的参数,回调函数,返回数据类型 $.post("<%=basePath%>pages/user!showCity.action",{"user.province":province},showCityCallback,"json"); } //回调函数,Jquery会自动将结果转换为对象,并传递到回调函数中。 function showCityCallback(obj){ //按Id查询页面元素 var city=$("#city"); //设置属性,每次改变时清空在显示 city.attr("length",1); for(var i=0;i<obj.allCity.length;i++){ var cid=obj.allCity[i].cid; var cname=obj.allCity[i].cname; //添加子节点 var option="<option value='"+cid+"'>"+cname+"</option>"; city.append(option); } } </script>
?
<select id="province" name="user.province" onchange="showCity(this.value);"> <option value="0">-请选择省份-</option> <c:if test="${allProvince!=null}"> <c:forEach var="province" items="${allProvince}"> <c:if test="${user.province==province.pid}"> <option value="${province.pid}" selected="selected">${province.pname}</option> </c:if> <c:if test="${user.province!=province.pid}"> <option value="${province.pid}" >${province.pname}</option> </c:if> </c:forEach> </c:if> </select> <select id="city" name="user.city"> <option value="${user.city}">-请选择城市-</option> </select>
?
public String showCity()throws Exception{ List<City> allCity=provinceService.findCityByPid(user.getProvince()); //使用org.Json来拼写字符串 JSONObject root=new JSONObject(); //定义 JSONArray array=new JSONArray(); //迭代循环将每个对象obj放入数组array Iterator<City> iter=allCity.iterator(); while (iter.hasNext()) { City city=iter.next(); JSONObject obj=new JSONObject(); obj.put("cid", city.getCid()); obj.put("cname", city.getCname()); array.put(obj); } //将array数组放入节点root对象中返回给Ajax调用 root.put("allCity", array); HttpServletResponse response=ServletActionContext.getResponse(); //取得response对象 response.setCharacterEncoding("GBK"); response.setContentType("text/html"); PrintWriter out=response.getWriter(); out.print(root.toString()); out.close(); return null; }
?