频道导航

Ajax提高篇（7）Ajax实现简单的下拉框联动显示数据

2020-06-08 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了Ajax提高篇（7）Ajax实现简单的下拉框联动显示数据，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

页面中的两个下拉列表框：

[html]view plaincopy 
   
 <tr>
 
tdstyle="width:130px" 所在学院：</tdtdstyle="width:100px"selectid="college"style="width:200px"runat="server"onchange="changcollege(this.value)"optionvalue="0" --请选择所在学院学院--
optionselect> 所在专业：selectid="specialty"style="width:200px"runat="server"onchange="SaveSpecical(this.value)" --请选择所在专业--
>

JS脚本代码

[javascript]copy 
   

<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
newActiveXObject("Msxml2.XMLHTTP");
catch(e)
newActiveXObject("Microsoft.XMLHTTP");
{}
if(!http_request)
window.alert("创建XMLHttpRequest对象失败");
returnif(responseType.toLowerCase()=="text")
http_request.onreadystatechange=callback;
else
window.alert("ERR");
if(method.toLowerCase()=="get")
http_request.open(method,true);
elseif(method.toLowerCase()=="post")
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
window.alert("Err");
http_request.send(content);
functionchangcollege(va)//当学院下拉列表发生改变时触发的脚本事件
if(va!='0')
varspeciality=document.getElementById("specialty");
speciality.disabled=varurl="Handler.ashx?type=college&id="+va;
send_request("GET",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]));
alert("您所请求的页面有异常。");
</script>

我们将http请求发送给服务端的Handler.ashx进行处理

copy 
    
   

class

Handler:IHttpHandler

voidProcessRequest(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="";
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();
+ds.Tables[0].Rows[i]["SpecialtyName"].ToString()+"|";
returnstr.Trim();
publicboolIsReusable{
get{
}

根据学院的编号获得相应的专业，并将专业的名称用“|”分割组合成字符串返回给客户端，客户端脚本拆分字符串添加到下拉框中。

这里只是二级的联动显示，三级联动数据的现实原理是一样的。

原文链接：https://www.f2er.com/ajax/162948.html

上一篇：UpdatePanel控件的使用(实现局部刷下一篇：Ajax提高篇（6）服务器端脚本和程序

猜你在找的Ajax相关文章

网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求兼容性问题利用iframe模拟ajax 实现表...

作者：前端之家时间：2021-01-14

手动实现AJAX

AJAX 每日更新前端基础，如果觉得不错，点个star吧 😃 https://github.com/Win...

作者：前端之家时间：2020-12-19

axios异步提交表单数据的不同形式

踩坑Axios提交form表单几种格式前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

作者：前端之家时间：2020-12-12

php的ajax简单实例

很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

作者：前端之家时间：2020-11-11

Json与Ajax(注册实例）

需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: "./serv...

作者：前端之家时间：2020-11-07

jSon和Ajax登录功能，ajax数据交互案例

ajax实例，检测用户与注册检测用户名是否被占用：在用户填写完用户名之后，ajax会异步向...

作者：前端之家时间：2020-11-07

关于AjaxControlToolkit的样式问题

网(LieHuo.Net)教程技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

作者：前端之家时间：2020-11-04

一个简单的AJAX实现(HELLO AJAX)

客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

作者：前端之家时间：2020-11-04

AJAX中文乱码的两类问题及解决之策

1）发送路径中的参数有中文，在服务器段接收参数值是乱码例如： var url=”a.jsp?na...

作者：前端之家时间：2020-11-04

实例：AJAX返回xml代码如何在网页中显示

建站学院（LieHuo.Net）文档今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

作者：前端之家时间：2020-11-04

最新文章