基于jquery的ajax二级联动.doc

index.aspx $(document).ready(function() /预先加载第一个select，加载品牌，看好加载的的页面BrandHandler.ashx $.post(BrandHandler.ashx, , function(data) $(#carbrand).html(data) , html);/当选择品牌的时候加载二级车系，构成联动 $(#carbrand).change(function() $.post(TypeHandler.ashx, cartype: $(this).val() , function(data) $(#cartype).empty().html(data) , html); ); ); -选择品牌- -选择车系-   BrandHandler.ashx1 using System; 2 using System.Web; 3 using System.Data; 4 using System.Text; 5 using System.Data.SqlClient; 6 using Tools; 7 public class BrandHandler : IHttpHandler 8 9 public void ProcessRequest (HttpContext context) 10 context.Response.ContentType = text/plain; 11 string ssql = select * from D_CARS_BRAND_TYPE where CARS_BRAND_TYPE=-1 order by ORDER_NO asc; 12 SqlDataReader dr = (SqlDataReader)DataBase.GetDataReader(ssql); 13 StringBuilder st = new StringBuilder(); 14 while(dr.Read() 15 16 st.Append( + drCARS_BRAND_TYPE_NAME.ToString() + n); 17 18 dr.Close(); 19 context.Response.Write(st.ToString(); 20 21 22 public bool IsReusable 23 get 24 return false; 25 26 27 TypeHandler.ashx 28 using System; 29 using System.Web; 30 using System.Data; 31 using System.Text; 32 using System.Data.SqlClient; 33 using Tools; 34 public class TypeHandler : IHttpHandler 35 36 public void ProcessRequest(HttpContext context) 37 38 context.Response.ContentType = text/plain; 39 context.Response.Clear(); 40 int cartype = 0; 41 if (int.TryParse(context.Request.Formcartype.ToString(), out cartype) 42 43 string ssql = select * from D_CARS_TYPE where CARS_BRAND_TYPE= + cartype + order by ORDER_NO asc; 44 SqlDataReader dr = (SqlDataReader)DataBase.GetDataReader(ssql); 45 StringBuilder st = new StringBuilder(); 46 while (dr.Read() 47 48 st.Append( + drCARS_TYPE_NAME.ToString() + n); 49 50 dr.Close(); 51 context.Response.Write(st.ToString(); 52 53 else 54 context.Response.Write(-出现错误-); 55 56 public bool IsReusable 57 58 get 59 60 return false; 61 62 63 中调用数据库+ajax=实现无刷新二级联动菜单move.aspx代码： 无刷新二级联动菜单 document.body.onload=function() document.getElementById(DropDownList2).options0=new Option(请先选择省份,); function send_request() /XmlHttpRequest并不是一个标准的产物，而是微软最初提出并得到很多浏览器支持的对象，因此其创建方法也是因浏览器而异的 /创建XmlHttpRequest对象 http_request=false; if(window.XmlHttpRequest) /非IE浏览器 http_request=new XmlHttpRequest(); else if(window.ActiveXObject) /微软IE浏览器 try /较新版本的IE浏览器 http_request=new ActiveXObject(Msxml2.XMLHTTP); catch(e) try http_request=new ActiveXObject(Mircosoft.XMLHTTP); catch(e) else window.alert(你的浏览器版本已经严重过时，请升级后早做操作！); return false; /readyState属性表示XMLHTTP的请求的当前状态，它等于4时表示请求已完成。 /onreadystatechange表示XMLHttpRequest对象中readyState改变时触发这个事件。 http_request.onreadystatechange=Getcity; /创建htpp请求 /open方法表示打开一个URL连接 http_request.open(get,GetCity.ashx?ProvinceType=+document.getElementById(DropDownList1).value,true); /发送上面创建的http请求 http_request.send(null); function Getcity() if(http_request.readyState=4)/请求完成，发送成功 /status属性表示HTTP请求的返回状态码，因为XMLHTTP也是请求的一个网页，所以它的含义和传统网页相同，如：200表示正常返回；404表示找不到网页；500表示服务器内部错误。 if(http_request.status=200)/交易成功 /在请求正常完成后，responseText表示以文本形式返回请求页面的内容 if(http_request.responseText!=) /new Array(7),可以把7改成一个尽可能大的值，不如说选项中最大的值 var myarr=new Array(7); var ResponseText=http_request.responseText; var pos=ResponseText.indexOf(;); var i=0; while(pos!=-1) var myText=ResponseText.substring(0,pos); if(myText!=) myarri=myText; i+; ResponseText=ResponseText.substr(pos+1); pos=ResponseText.indexOf(;); continue; for(var n=0;ni;n+) document.getElementById(DropDownList2).optionsn=new Option(myarrn,); document.getElementById(DropDownList2).length=i; else document.getElementById(DropDownList2).options0=new Option(请先选择省份,); document.getElementById(DropDownList2).length=1; =move.aspx.cs代码：protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) SqlConnection sqlconn = new SqlConnection(ConfigurationManager.AppSettingsConnStr.ToString(); SqlDataAdapter sda1 = new SqlDataAdapter(select * from province, sqlconn); DataSet myds1 = new DataSet(); sda1.Fill(myds1); this.DropDownList1.DataSource = myds1.Tables0; this.DropDownList1.DataBind(); this.DropDownList1.Attributes.Add(onchange, send_request(); =GetCity.ashx代码：public class GetCity : IHttpHandler public void ProcessRequest (HttpContext context) context.Response.ContentType = text/plain; string CityResult = ; string type = context.Request.QueryStringProvinceType.ToString(); SqlConnection sqlconn = new SqlConnection(ConfigurationManager.AppSettingsConnStr.ToString(); sqlconn.Open(); SqlCommand comm=new SqlCommand(select county from county where type=+type,sqlconn); SqlDataReader reader = comm.ExecuteReader(); while(reader.Read() CityResult += reader0+; context.Response.Write(CityResult); reader.Close(); public bool IsReusable get return false; =sql2000数据库表：province表：；county表： =效果图：| 使用ajax省市二级联动2007-10-16 14:42 1664人阅读 评论(1) 收藏 举报aspx页面 adduser /jb函数会根据不同的浏览器初始化个xmlhttp对象 function jb() var A=null; try A=new ActiveXObject(Msxml2.XMLHTTP); catch(e) try A=new ActiveXObject(Microsoft.XMLHTTP); catch(oc) A=null if ( !A & typeof XMLHttpRequest != undefined ) A=new XMLHttpRequest() return A /下面Go函数是父列表框改变的时候调用，参数是选择的条目 function Go(obj) /得到选择框的下拉列表的value var svalue = obj.value; /定义要处理数据的页面 var weburl = adduser.aspx?parent_id=+svalue; /初始化个xmlhttp对象 var xmlhttp = jb(); /提交数据，第一个参数最好为get，第三个参数最好为true xmlhttp.open(get,weburl,true); / alert(xmlhttp.responseText); /如果已经成功的返回了数据 xmlhttp.onreadystatechange=function() if(xmlhttp.readyState=4)/4代表成功返回数据 var result = xmlhttp.responseText;/得到服务器返回的数据 /先清空ddlC的所有下拉项 document.getElementById(ddlC).length = 0; /给ddlC加个全部型号的,注意是Option不是option document.getElementById(ddlC).options.add(new Option(请选择,0); if(result!=)/如果返回的数据不是空 /把收到的字符串按照，分割成数组 var allArray = result.split(,); /循环这个数组，注意是从1开始，因为收到的字符串第一个字符是，号，所以分割后第一个数组为空 for(var i=1;iallArray.length;i+) /在把这个字符串按照|分割成数组 var thisArray = allArrayi.split(|); /为ddlC添加条目 document.getElementById(ddlC).options.add(new Option(thisArray1.toString(),thisArray0.toString(); /发送数据，请注意顺序和参数，参数一定为null或者 xmlhttp.send(null); 所在地   后台代码 using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Data.SqlClient;public partial class adduser : System.Web.UI.Page private SqlConnection con; private SqlDataAdapter da; private DataSet ds; protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) con=new SqlConnection(server=.;database=evs;uid=sa;pwd=wq); da=new SqlDataAdapter(select * from province,con); ds = new DataSet(); da.Fill(ds, province); ds.Tablesprovince.DefaultView.Sort = id ASC; ddlS.DataSource = ds.Tablesprovince.DefaultView; ddlS.DataValueField = id; ddlS.DataTextField = province; ddlS.DataBind(); BindDrop(); protected void Button1_Click(object sender, EventArgs e) Response.Write(ddlS.SelectedItem.Text); Response.Write(ddlC.SelectedItem.Text); protected void BindDrop() string str = Request.QueryStringparent_id; string str1 = ddlS.SelectedValue; Response.Write(str1); /如果str加个字符串!=原来的字符串则说明触发过ddlS的onchange事件 if (str + abc) != abc) /绑定 ddlC控件 BindChild(str);/把传来的父DropDownList的value做为参数 else BindParent(str1); protected void BindParent(string str) /如果是第一次请求或者是刷新这个页面则根据ddlS的值来选择 /把参数转化成int int i = Convert.ToInt32(str); ddlC.Items.Clear(); ddlC.Items.Add(new ListItem(请选择, 0); /得到数据库连接字符串 string connStr = server=.;database=evs;uid=sa;pwd=wq; /初始化个conn对象 SqlConnection conn = new SqlConnection(connStr); /数据库语句 string commStr = string.Format(select city,provid from city where provid=0, i); /建立数据库命令对象 SqlCommand comm = new SqlCommand(commStr, conn); /打开数据库 conn.Open(); /执行命令 SqlDataReader dr = comm.ExecuteReader(); /循环dr，给ddlS添加条目 while (dr.Read() ddlC.Items.Add(new ListItem(dr0.ToString(), dr1.ToString(); /也可以这样 /ddlS.Items.Add(new ListItem(drphone_text.ToString(),drphone_value.ToString(); ddlC.ClearSelection(); ddlS.Items0.Selected = false; /添加下面这话的意思是当点提交按钮提交窗体的时候第二个ddlC的状态能够得到保存 ddlC.SelectedValue = Request.FormddlC; dr.Close(); conn.Close(); protected void BindChild(string str) /通过js给包括dropdownlist任何控件添加的内容不会被保存状态 /把参数转化成int int i = Convert.ToInt32(str); string result = ; Response.Clear(); string connStr = server=.;database=evs;uid=sa;pwd=wq; SqlConnection conn = new SqlConnection(connStr); SqlCommand comm = conn.CreateCommand(); string commStr = string.Format(select city,provid from city where provid=0, i); comm.CommandText = commStr; conn.Open(); SqlDataReader dr = comm.ExecuteReader(); while (dr.Read() result += , + dr1.ToString() + | + dr0.ToString(); Response.Write(result); Response.Flush(); Response.Close(); dr.Close(); conn.Close(); protected void Button1_Click1(object sender, EventArgs e) Response.Write(ddlS.SelectedItem.Text); Response.Write(ddlC.SelectedItem.Text); 1.创建文件Recipe24.aspx,实现后台代码如下：/ 引入命名空间 代码如下复制代码using System.Web.S