您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
利用jquery的ajax实现二级联互动菜单
作者：佚名 责任编辑：admin 更新时间：2022-06-22
二级联互动菜单，利用了jquery的ajax实现，具体实现如下，喜欢的朋友可以参考下
菜单资源保存在数据库中。利用了jquery的ajax实现。用到的包有：json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页面的代码： 代码如下: <%@ page contentType="text/html; charset=gbk"%> <%@ taglib prefix="s" uri="/struts-tags"%> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; out.println(basePath); %> <script type="text/javascript"> jQuery(function($){ //alert("ok"); }); function onchangeShow(oneId){ $.ajax({ url : "<%=basePath%>cateJson.whbs", data : {parentId : oneId}, // 参数 type : "post", cache : false, dataType : "json", //返回json数据 error: function(){ alert('error'); }, success:onchangecallback }); } function onchangecallback(data){ document.all['twoId'].options.length = 0; //清空原有的option var str=""; for(var i=0;i<data.length;i++){ str+="<option value='"+data[i].recordId+"'>"+data[i].title+"</option>" } $("#twoId").html(str); } </script> <html> <body> <div align="center"> 请选择部门类型 <s:select list="rfones" listKey="recordId" listValue="title" name="oneId" theme="simple" id="oneId" value="oneID" onchange="onchangeShow(this.value)"></s:select> 请选择文件类型 <s:select list="rftwos" listKey="recordId" listValue="title" name="twoId" theme="simple" id="twoId" value="twoID"></s:select> </div> </body> </html> struts中action的代码 代码如下: /** * des:取得二级联动菜单 * autho:exceljava * date:Nov 20, 2009 * @return * @throws IOException */ public String getJsonCategory() throws IOException{ rfjsons=archiveService.getCategoryByParentID(parentId);//这里从数据库取得数据 net.sf.json.JSONArray jsonObj=net.sf.json.JSONArray.fromObject(rfjsons);//组装成json数据 sendMessage(jsonObj.toString());//向视图push json数据 return null; } /** * des:封装发送json格式的数据回js * autho:exceljava * date:Nov 20, 2009 * @param content * @throws IOException */ public void sendMessage(String content) throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.getWriter().write(content); }- 上一个程序编程： 解析JavaScript中的不可见数据类型
- 下一个程序编程： jQuery获得内容和属性方法及示例
