利用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); 
 

 

时间: 2024-09-08 08:13:30

利用jquery的ajax实现二级联互动菜单的相关文章

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解_jquery

虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_java

写在前面,在笔者完成这个demo的时候,笔者发现现在大家已经不用Ajax来完成联级菜单了,实际上笔者这个demo也并不是为了完成这个,笔者主要的学习方向是JavaWeb后台的业务逻辑开发.但是做后台呢还是需要对前端有所了解,尤其是像Ajax这种异步提交数据的技术需要了解并掌握.所以这里笔者这里用了一个联级菜单来练习Ajax异步提交,当然后续还会写几个异步提交表单的demo. 笔者的后台是用的spring+SpringMVC的框架,这里不对这部分进行解释,重点在jQuery和Ajax. 第一,下载

在MVC下利用JQUERY实现AJAX提交并实现AJAX.NET的UpdateProgress功能

在MVC下我们不能利用AJAX.NET控件,那么要实现UpdateProgress来显示进度怎么办,我们可以利用JQUERY来实现这个功能.顺便说一句JQuery将集成在下一版本的Visual Studio中,是MS AJAX FrameWork的一部分. 1.接着上一篇的XML Menu,我们先编辑Menu.XML,添加如下代码: <MenuItem Order="4" Action="Test" Controller="AJAXFORM"

利用jQuery及AJAX技术定时更新GridView的某一列数据_jquery

看到一个问题:定时更新GridView的某一列中的状态文本.马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果. 具体实现: 准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新. getuserlist.xml 定义一个UserList的根节点,下边每个UserItem对应一条数据,UI

java web中jquery实现ajax问题

问题描述 java web中jquery实现ajax问题 利用jquery中ajax实现区域的5级联动,当点击第一个下拉框时,可以在第二个下拉框中填充相应数据,但是当点击第二个下拉框时,不能填充第三个下拉框,在Action中可以获取到数据 解决方案 JQuery实现Ajax加载图片 解决方案二: 只做过两个的省市联动,还不是要异步查询数据库的. 解决方案三: 现在现在现在.不懂这个问题 解决方案四: ajax异步查询就可以了 解决方案五: F12看浏览器控制台报什么错误 解决方案六: 具体你还是

jquery的ajax调用Webservice返回Json数组

本文章是利用jquery的ajax调用webservice返回json数组哦,json数据是网页特效的一种小型轻型数据,实时交互性更强于xml哦. json数据 {'employee':[{'name':'john','sex':'man','age':'25'},{'name':'tom','sex':'man','age':'21'},{'name':'mary','sex':'woman','age':'21'}]}     //jquery 调用webservice导入数据       

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

 本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC &quo

利用jquery.qrcode在页面上生成二维码且支持中文

 这篇文章主要介绍了利用jquery.qrcode在页面上生成二维码且支持中文.需要的朋友可以过来参考下,希望对大家有所帮助 实例如下:  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)_jquery

其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal