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-异步加载省市区联动的主要内容,如果未能解决你的问题,请参考以下文章

省市县三级异步加载导航

三级联动怎么回显 javaweb

java 异步实现省市联动

调接口省市区三级联动相关代码

element Cascader 级联选择器动态加载实例

省市区三级联动