022-异步加载省市区联动
Posted 灬伊天?
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了022-异步加载省市区联动相关的知识，希望对你有一定的参考价值。
AreaList.html
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="js/jquery-1.7.1.min.js"></script> 7 <script> 8 //action:1表示省，2表示市，3表示区 9 $(function () { 10 LoadPrivince(); 11 12 //如下代码不能正常执行，原因是：执行此代码时，要获取省的信息，但是现在省中还没有绑定上数据 13 //LoadCity($(‘#provice‘).val()); 14 15 //为对象注册事件处理程序 16 $(‘#provice‘).change(function () { 17 LoadCity($(this).val()); 18 }); 19 20 //调用事件处理程序，模拟事件触发 21 //$(‘#provice‘).change(); 22 23 $(‘#city‘).change(function () { 24 LoadDistrict($(this).val()); 25 }); 26 }); 27 28 function LoadPrivince() { 29 //这里是异步请求，只要发出去请求，这个方法就算执行完成 30 $.getJSON( 31 ‘AreaList.ashx‘, 32 { 33 action: 1 34 }, 35 function (data) {//{Id,Title} 36 //[{},{},{}...] 37 var province = $(‘#provice‘); 38 $.each(data, function (index, item) { 39 province.append(‘<option value="‘ + item.Id + ‘">‘ + item.Title + ‘</option>‘); 40 }); 41 42 //执行下面代码时，表示省信息已经加载完成 43 //LoadCity(province.val()); 44 province.change(); 45 } 46 ); 47 } 48 49 function LoadCity(pid) { 50 $.getJSON( 51 ‘AreaList.ashx‘, 52 { 53 action: 2, 54 pid: pid 55 }, 56 function (data) { 57 var city = $(‘#city‘); 58 city.empty();//清除之前绑定的市信息 59 $.each(data, function (index, item) { 60 city.append(‘<option value="‘ + item.Id + ‘">‘ + item.Title + ‘</option>‘); 61 }); 62 LoadDistrict(city.val()); 63 } 64 ); 65 } 66 67 function LoadDistrict(cid) { 68 $.getJSON( 69 ‘AreaList.ashx‘, 70 { 71 action: 3, 72 cid: cid 73 }, 74 function (data) { 75 var district = $(‘#district‘); 76 district.empty();//清除原来绑定的数据 77 $.each(data, function (index, item) { 78 district.append(‘<option value="‘ + item.Id + ‘">‘ + item.Title + ‘</option>‘); 79 }); 80 } 81 ); 82 } 83 </script> 84 </head> 85 <body> 86 <select id="provice"></select> 87 <select id="city"></select> 88 <select id="district"></select> 89 </body> 90 </html>
AreaList.ashx
1 public class AreaList : IHttpHandler 2 { 3 4 public void ProcessRequest(HttpContext context) 5 { 6 context.Response.ContentType = "text/plain"; 7 8 int action = int.Parse(context.Request["action"]); 9 List<AreaItem> list = new List<AreaItem>(); 10 string sql; 11 DataTable dt; 12 SqlParameter p; 13 switch (action) 14 { 15 case 1://查询省 16 sql = "select provinceId,provinceName from s_province"; 17 list = DtToList(sql); 18 break; 19 case 2://查询市 20 sql = "select cityid,cityname from s_city where [email protected]"; 21 p = new SqlParameter("@pid", context.Request["pid"]); 22 list = DtToList(sql, p); 23 break; 24 case 3://查询区 25 sql = "select districtid,districtname from s_district where [email protected]"; 26 p = new SqlParameter("@cid", context.Request["cid"]); 27 list = DtToList(sql, p); 28 break; 29 } 30 31 javascriptSerializer js = new JavaScriptSerializer(); 32 string result = js.Serialize(list); 33 context.Response.Write(result); 34 } 35 36 public bool IsReusable 37 { 38 get 39 { 40 return false; 41 } 42 } 43 44 private List<AreaItem> DtToList(string sql, params SqlParameter[] ps) 45 { 46 DataTable dt = SqlHelper.GetList(sql, ps); 47 List<AreaItem> list = new List<AreaItem>(); 48 foreach (DataRow row in dt.Rows) 49 { 50 list.Add(new AreaItem() 51 { 52 Id = Convert.ToInt32(row[0]), 53 Title = row[1].ToString() 54 }); 55 } 56 return list; 57 } 58 } 59 60 public class AreaItem 61 { 62 public int Id { get; set; } 63 public string Title { get; set; } 64 }
SqlHelper.cs
1 public static class SqlHelper 2 { 3 private static string connStr = 4 System.Configuration.ConfigurationManager.ConnectionStrings["conn"].ConnectionString; 5 6 public static DataTable GetList(string sql, params SqlParameter[] ps) 7 { 8 using (SqlConnection conn = new SqlConnection(connStr)) 9 { 10 SqlDataAdapter sda = new SqlDataAdapter(sql, conn); 11 sda.SelectCommand.Parameters.AddRange(ps); 12 13 DataTable dt = new DataTable(); 14 sda.Fill(dt); 15 16 return dt; 17 } 18 } 19 20 public static int ExecuteNonQuery(string sql, params SqlParameter[] ps) 21 { 22 using (SqlConnection conn = new SqlConnection(connStr)) 23 { 24 SqlCommand cmd = new SqlCommand(sql, conn); 25 cmd.Parameters.AddRange(ps); 26 27 conn.Open(); 28 return cmd.ExecuteNonQuery(); 29 } 30 } 31 32 public static object ExecuteScalar(string sql, params SqlParameter[] ps) 33 { 34 using (SqlConnection conn = new SqlConnection(connStr)) 35 { 36 SqlCommand cmd = new SqlCommand(sql, conn); 37 cmd.Parameters.AddRange(ps); 38 39 conn.Open(); 40 return cmd.ExecuteScalar(); 41 } 42 } 43 44 }
Web.config
1 <?xml version="1.0" encoding="utf-8"?> 2 3 <!-- 4 有关如何配置 ASP.NET 应用程序的详细信息，请访问 5 http://go.microsoft.com/fwlink/?LinkId=169433 6 --> 7 8 <configuration> 9 <system.web> 10 <compilation debug="true" targetFramework="4.5" /> 11 <httpRuntime targetFramework="4.5" /> 12 </system.web> 13 <connectionStrings> 14 <add name="conn" connectionString="server=.;database=web1;uid=sa;pwd=123"/> 15 </connectionStrings> 16 </configuration>
以上是关于022-异步加载省市区联动的主要内容，如果未能解决你的问题，请参考以下文章