好久没弄Ajax了,最近的一个项目中用到了下拉框联动显示数据的功能,索性利用Ajax来实现。实现的方法有很多,网上也有很多其他的方法,web开发中会经常用到,记录下来,分享给新手。
页面中的两个下拉列表框:
<tr>
<td style="width: 130px">
所在学院:</td>
<td style="width: 100px">
<select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)">
<option value="0">
--请选择所在学院学院--
</option>
</select></td>
</tr>
<tr>
<td style="width: 130px">
所在专业:</td>
<td style="width: 100px">
<select id="specialty" style="width: 200px" runat="server" onchange="SaveSpecical(this.value)">
<option value="0">
--请选择所在专业--
</option>
</select></td>
</tr>
JS脚本代码:
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
varhttp_request=false;
functionsend_request(method,url,content,responseType,callback)//定义发送请求的函数
{
http_request=false;
if(window.XMLHttpRequest)
{
http_request=newXMLHttpRequest();
if(http_request.overrideMimeType)
{
http_request.overrideMimeType("text/xml");
}
}
else
{
try
{
http_request=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http_request=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{}
}
}
if(!http_request)
{
window.alert("创建XMLHttpRequest对象失败");
returnfalse;
}
if(responseType.toLowerCase()=="text")
{
http_request.onreadystatechange=callback;
}
else
{
window.alert("ERR");
returnfalse;
}
if(method.toLowerCase()=="get")
{
http_request.open(method,url,true);
}
elseif(method.toLowerCase()=="post")
{
http_request.open(method,url,true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
else
{
window.alert("Err");
returnfalse;
}
http_request.send(content);
}
functionchangcollege(va)//当学院下拉列表发生改变时触发的脚本事件
{
if(va!='0')
{
varspeciality=document.getElementById("specialty");
speciality.disabled=false;
varurl="Handler.ashx?type=college&id="+va;
send_request("GET",url,null,"text",populateClass3);
}
}
functionpopulateClass3()//Ajax执行成功的回调函数
{
varf=document.getElementById("specialty");
if(http_request.readyState==4)
{
if(http_request.status==200)
{
varlist=http_request.responseText;
varclassList=list.split("|");
f.options.length=1;
for(vari=0;i<classList.length;i++)
//将取得的结果添加到下级的列表框中
{
vartmp=classList[i].split(",");
f.add(newOption(tmp[1],tmp[0]));
}
}
else
{
alert("您所请求的页面有异常。");
}
}
}
</script>
我们将http请求发送给服务端的Handler.ashx进行处理。
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->publicclassHandler:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
stringtype=context.Request.QueryString["type"];
if(type.Equals("college"))
{
stringid=context.Request.QueryString["id"];
context.Response.ContentType="text/plain";
context.Response.Write(getSpecialty(id));//这个是从数据库中根据传来省的id查询出来的。学院的名字和主键,主键以便去查专业的名字
}
}
publicstringgetSpecialty(stringcollege)
{
DataSetds=GetInformation.GetSpecialtyInfo(college);
stringstr="";
for(inti=0;i<ds.Tables[0].Rows.Count;i++)
{
if(i==ds.Tables[0].Rows.Count-1)
{
str+=ds.Tables[0].Rows[i]["SpecialtyID"].ToString()+","+ds.Tables[0].Rows[i]["SpecialtyName"].ToString();
}
else
{
str+=ds.Tables[0].Rows[i]["SpecialtyID"].ToString()+","+ds.Tables[0].Rows[i]["SpecialtyName"].ToString()+"|";
}
}
returnstr.Trim();
}
publicboolIsReusable{
get{
returnfalse;
}
}
}
根据学院的编号获得相应的专业,并将专业的名称用“|”分割组合成字符串返回给客户端,客户端脚本拆分字符串添加到下拉框中。
这里只是二级的联动显示,三级联动数据的现实原理是一样的。
分享到:
相关推荐
本篇文章给大家介绍基于ajax实现下拉框联动显示数据,代码非常简单,需要的朋友可以参考下
ajax+ASP实现无限级Select下拉框联动,形成一个实用的多级菜单,读取Access数据库,本实例是一个6级的菜单,根据你的需要,你还可以进行扩展。它使用AJAX技术控制数据使用时才加载,提高程序效率,可以参考一下。
ajax 实现 (全国,省,是,区....) N级联 Demo js: <script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
freemarker ajax 请求json数据格式 联动下拉 漂亮的弹出框 提示框freemarker ajax 请求json数据格式 联动下拉 漂亮的弹出框 提示框freemarker ajax 请求json数据格式 联动下拉 漂亮的弹出框 提示框freemarker ajax ...
NULL 博文链接:https://lichaobao.iteye.com/blog/1949419
基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar
json实现省市县三级联动下拉框,从数据库读取数据到页面显示!
Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+ASP简单留言本 Ajax仿Google搜索提示ASP+...
AJAX版省市区三级联动下拉框 使用说明: 1、在sql server 2000 中建立一个库:asptest 2、在sql server 2000 中建立一个帐号:asptest,密码:asptest 3、把压缩包中的 asptest 恢复到库 asptest 中,...
一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是,这次要实现select与别的选项框联动,也就是要动态添加option数据。查阅了很多资料,终于搞定。下面就分享一下,如何利用jQuery和...
1、Jsp页面 //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; ... //初始化数据 jQuery(document).ready(function(){ getProvince(); });
通过初步学习DWR框架发现真是一个不错的AJAX框架,特别是dwr.util工具对java发数据传输特别方便。这是我写的一个dwr和spring结合在页面下拉框产生联动效果的简单例子,请多指教!
首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ...
JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量。(点击此处下载源代码) 下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包 commons-beanutils-1.7.0.jar ...
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中,在页面上引用即可调用 代码如下://获取cookie值function readCookie...
ajax里response返回的数据是一个二维数组,比如这样的[{key,val},{key,val},{key,val}],以这样的形式数据传到前台,实现菜单联动下拉框,具体详解,请看文档