[转载]asp.net基于jquery的ajax二级联动.
页面代码:
index.aspx < script src = "../ADMIN/js/jquery.js" type = "text/javascript" ></ script > < script type = "text/javascript" > $(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'); }); }); </ script > < table width = "950" height = "35" border = "0" cellpadding = "0" cellspacing = "0" class = "left_tb" > < tr > < td width = "70" align = "right" background = "../IMAGES/b_4.gif" >< img src = "../IMAGES/serch_so.gif" width = "59" height = "17" /></ td > < td width = "100" background = "../IMAGES/b_4.gif" > < select id = "carbrand" name = "carbrand" > < option value = "-1" >--选择品牌--</ option > </ select > </ td > < td width = "105" background = "../IMAGES/b_4.gif" > < select id = "cartype" name = "cartype" > < option value = "-1" >--选择车系--</ option > </ select > </ td > < td background = "../IMAGES/b_4.gif" style = "width:80px" > < a href = "###" id = "search_type" >< img src = "../IMAGES/serch.gif" alt = "搜索" style = "border:0px" /></ a > </ td > < td width = "120" background = "../IMAGES/b_4.gif" > < input id = "TextKeys" type = "text" /> </ td > < td width = "100" align = "left" background = "../IMAGES/b_4.gif" > < a href = "###" id = "search_news" > < img alt = "新闻资讯" src = "../IMAGES/serch.gif" style = "border:0" /></ a > </ td > </ tr > </ table > |
Hanlder异步处理页面代码:
using System; using System.Web; using System.Data; using System.Text; using System.Data.SqlClient; using Tools; public class BrandHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain" ; string ssql = "select * from D_CARS_BRAND_TYPE where CARS_BRAND_TYPE>=-1 order by ORDER_NO asc" ; SqlDataReader dr = (SqlDataReader)DataBase.GetDataReader(ssql); StringBuilder st = new StringBuilder(); while (dr.Read()) { st.Append( "<option value=\"" + dr[ "CARS_BRAND_TYPE" ].ToString() + "\">" + dr[ "CARS_BRAND_TYPE_NAME" ].ToString() + "</option>\n" ); } dr.Close(); context.Response.Write(st.ToString()); } public bool IsReusable { get { return false ; } } } using System; using System.Web; using System.Data; using System.Text; using System.Data.SqlClient; using Tools; public class TypeHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain" ; context.Response.Clear(); int cartype = 0; if ( int .TryParse(context.Request.Form[ "cartype" ].ToString(), out cartype)) { string ssql = "select * from D_CARS_TYPE where CARS_BRAND_TYPE=" + cartype + " order by ORDER_NO asc" ; SqlDataReader dr = (SqlDataReader)DataBase.GetDataReader(ssql); StringBuilder st = new StringBuilder(); while (dr.Read()) { st.Append( "<option value=\"" + dr[ "CARS_TYPE" ].ToString() + "\">" + dr[ "CARS_TYPE_NAME" ].ToString() + "</option>\n" ); } dr.Close(); context.Response.Write(st.ToString()); } else context.Response.Write( "<option value='1'>--出现错误--</option>" ); } public bool IsReusable { get { return false ; } } } |