`
- 浏览:
118914 次
- 性别:
- 来自:
上海
-
第一步:在相应的jsp页面导入ajax.js
本实例采用如下的js:
/
* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/**//*@cc_on @*/
/**//*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') ...{
xmlHttp = new XMLHttpRequest();
}
function callServer(url, callback) ...{
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = callback;
// Send the request
xmlHttp.send(null);
}
function callServerPost(url, callback, params) ...{
xmlHttp.open("post", url, true);
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = callback;
// Send the request
xmlHttp.send(params);
}
function selectSwith(elementId) ...{
var select = document.getElementById(elementId);
var input = document.getElementById(elementId + "Other");
if (select != null && input != null) ...{
if (select.value == "other") ...{
input.style.display="inline";;
} else ...{
input.style.display="none";
}
}
}
第二步: 在相应的jsp页面中写入如下代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link href="css/style.css" rel="stylesheet" type="text/css">
<SCRIPT language="javascript" src="js/ajax.js"></SCRIPT>
<script type="text/javascript">...
function showDepList()...{
var f=document.forms[0];
var url="showDepList?id="+f.banId.value;
<%--上面一句调用相应的servlet ,传入相应的集团id--%>
xmlHttp.open('get',url,true);
xmlHttp.onReadyStateChange=handDepListState;
<%--上面一句调用相应的Change事件--%>
xmlHttp.send(null);
}
function handDepListState()...{
if(xmlHttp.readyState==4)...{
<%--readyState=4表示已经准备好--%>
if(xmlHttp.status==200)...{
<%--status==200表示状态正常--%>
var f=document.forms[0];
var xml=xmlHttp.responseXml;
<%--接收到相应的xml文件--%>
var items=xml.getElementsByTagName('item');
<%--获得item标记下的所有子节点--%>
var length=f.depId.options.length;
for(var i=0;i<length;i++)...{
f.depId.options.remove(0);
<%--清空相应的下拉菜单中的选项--%>
}
for(var i=0;i<items.length;i++)...{
<%--遍历每子项目--%>
var item = items[i];
var id = item.getAttribute("id");
var text = item.getAttribute("text");
<%--取得每个子项中id和text属性的值--%>
f.depId.options.add(new Option(text,id));
<%--将相应的值加载到下拉列表框中--%>
}
}
}
}
</script>
</head>
<body>
当中其他代码略
<td class="dgl">集团;</td>
<td align="left">
<html:select property="banId" onchange="showDepList();">
调用onchange事件
<html:options collection="banList" property="id" labelProperty="name"/>
</html:select></td>
<td class="dgl">部门</td>
<td align="left">
<html:select property="depId">
<html:options collection="depList" property="id" labelProperty="name"/>
</html:select>
</td>
</body>
</html> 第三步:编写相应的servlet
package com.ssc.mvc.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ssc.mvc.Common;
import com.ssc.mvc.MvcException;
import com.ssc.mvc.persist.entity.SDep;
import com.ssc.mvc.service.DepService;
public class GetDepListServlet extends HttpServlet
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
AJAX实例的级联菜单,初学AJAX。
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
完整可运行的用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)
Ajax应用几个实例-在线用户计数实例、在线表格编辑实例、 无刷新形式的查询功能实例、实时校验实例、Web级联菜单实例
本篇文章主要是对Ajax级联菜单的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
主要介绍了ajax级联菜单实现方法,结合实例形式分析了基于ajax与后台php交互实现级联菜单功能的相关操作技巧,需要的朋友可以参考下
实例61 实现级联菜单的设计 实例62 PHP+Ajax树状菜单 第8章 Ajax数据库操作 实例63 显示数据库系统信息 实例64 实现数据库常见操作 实例65 完成数据库多种查询显示 实例66 数据库记录自动提示 实例67 AjaX...
ASP.NET中AJAX技术原理 实例 表单数据验证 级联菜单
AJAX综合实例,内附源码和数据库。...主要有自动保存草稿,无刷新回复,灯箱效果,切换标签页,购物车,自动查找邮编,聊天室,动态加载FAQ,多级级联菜单,动态树形列表,动态许愿墙等几十个常用实例。。 超值哦。~~
Js Select下拉框级联菜单,一共支持5级联动,相信够用了,这种菜单不用多介绍吧,后一级的值与前一级是父、子关系,该示例还演示了动态添加菜单、减少菜单的功能,还有显示/不显示空值的功能,如演示截图所示。
Asp+Ajax无限级联动下拉框菜单Access版 ASP仿Google输入框提示_自动完成功能 AJAX+ASP多级无限制级联菜单(地市版) ASP下结合AJAX实现输入框提示(自动完成) ASP 树形菜单TreeView 多样式版 jQuery实例_飞飞ajax带...
AJAX+ASP.NET 多级无刷新下拉列表菜单。
说明:这是用c#语言在vs2005下改写的一位朋友用asp实现的省、市、县三级级联菜单,数据库用access,是c#实现ajax的典型实例。在此对那位朋友表示感谢,此示例旨在帮助一些对ajax技术感兴趣的朋友们快速入门。下面的...
摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1、...
《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发...7.5 级联菜单 7.6 动态表单 7.7 树状菜单 7.8 应用Ajax框架 第8章 在线统计 第9章 注册与登录模块 第10章 学生信息管理系统 第11章 仓库管理系统 第12章 物流管理系统
MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果 数据库备份 本章实例所需要的数据库 第15章(/C15/) AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用...
实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等.. 程序收集了本人在ASP.NET开发应用中会经常用到的轻量级的AJAX小例子,程序里面很多地方做了注释,通俗易懂...
本文实例讲述了js实现全国省份城市级联下拉菜单效果代码。分享给大家供大家参考。具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax...