萬盛學電腦網 >> 腳本專題 >> javascript >> 利用jquery的ajax實現二級聯互動菜單
利用jquery的ajax實現二級聯互動菜單
二級聯互動菜單，利用了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排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved