html + ashx 实现Ajax省市联动

基本思路：1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果

表结构：

这里，开始创建一个命为demo.html的页面，并在页面中创建我们所需要的select标签

  <!--定义省select标签 start-->
    <select id="pro">

    </select>
    <!--定义省select标签 end-->

    <!--定义市select标签 start-->
    <select id="city">

    </select>
    <!--定义市select标签 end-->

引用jquery文件

 <script src="../Scripts/jquery-1.7.1.js"></script>

基础工作完成，在页面定义一个初始化省的js事件

<script type="text/javascript">
        $(function () {
            //初始化省的标签
            initProviceSelect();
        });

        function initProviceSelect() {
         
            });
        }
    </script>

创建一个新的LoadAllProviceData.ashx，让前台向它发送请求

function initProviceSelect() {
            //发送异步请求
            //data返回的数据取决于后台的数据处理操作
            $.get("LoadAllProviceData.ashx", "", function (data) {
                $("#pro").html(data);//把这个标签内部的所有html替换成data
            });
        }

后台代码处理：

 context.Response.ContentType = "text/plain";
            //拼接字符串
            StringBuilder sb = new StringBuilder();
           
            //这里偷个懒，用个古老的方式来演示=>使用强类型dataset获取省的所有数据
            //实际这个强类型内部封装的都是ado.net的sql语法  
            //※强类型的DataSet有兴趣可以自己了解下，建议不用深入。因为现在有了强大的EF，这里纯粹是为了简单做个演示而使用它
            //不了解这种写法没关系，你可以使用日常的查询或者自己写个简单的sqlHelper来进行数据操作
            ProvinceTableAdapter adapter = new ProvinceTableAdapter();
            ProvinceCityDataSet.ProvinceDataTable provinces = adapter.GetData();
            foreach (var pro in provinces) //遍历行
            {
                sb.AppendFormat("<option value='{0}'>{1}</option>", pro.ProID, pro.ProName);
            }


            context.Response.Write(sb.ToString());

开始浏览页面，就可以看到省的数据都被加载出来了。有没有觉得很easy?接下来开始实现通过选择省来捞出当前省对应下的市

在页面上绑定省的下拉列表的change事件

function bindProSelectChangeEvent() {
            $("#pro").change(function(){
             
                });
            });
        }

老样子，创建一般处理程序来发送异步请求到后台

先在前台页面定义请求事件 

//绑定省的下拉列表的change事件
        function bindProSelectChangeEvent() {
            $("#pro").change(function(){
                //拿到选中省的id（当前select标签的id)
                var pId = $(this).val();
                $.getJSON("LoadProviceCitiesByProID.ashx", { pId: pId }, function (data) {
                    $("#city").empty();
                    for (var key in data) {//通过key遍历数组，其实就是使用索引
                        var cId = data[key].CityId;
                        var cName = data[key].CityName;                       
                        //这里使用append之前注意下append是追加，所以为了防止把之前的数据要加进去，在之前先进清空
                        $("#city").append("<option value='"+cId+"'>"+cName+"</option>");
                    }
                });
            });
        }

问题来了，假设我不使用$.getJSON或$.getAjax ，直接用$.get能行吗？

当然没问题，只是$.get返回的是一个string对象，需要再去手动给它转成json格式。这里顺便简单写下在这种情况下如何去做处理

把字符串处理成json对象的两种方式：

1.使用eval我想你应该很熟悉，这货可以直接把这个字符串当成一个js执行对象，但是这种不给力

var jsonData = eval(data); 

替换成下面这种，让它强制去执行， 这种处理方式兼容性会差些

var jsonData = eval("(" + data + ")");

2.使用jquery提供的一种处理方式

var jsonData = $.parseJSON(data);

好，看看浏览器调试结果，这样依然可以得到跟使用$.getJSON一样的效果了

后台处理，

第一种方式。自己拼接一个json格式返回前台，前台再遍历它读取

context.Response.ContentType = "text/plain";
            //正常情况下不会为空，但如果直接请求ashx 这种情况就有可能为空了
            //浏览器端不是受我们控制的，除非cs程序还有可能受我们控制
            //所以不要相信客户端来的请求
            int pId =int.Parse(context.Request["pId"] ?? "0");

            //根据省的id拿到所有的城市信息
            CityTableAdapter adapter = new CityTableAdapter();
            ProvinceCityDataSet.CityDataTable cityTable= adapter.GetProviceCityByProID(pId);

            //遍历城市信息，并且输出一个json格式字符串到前台
            //两种方式
            //1.自己拼接stringbuilder  最灵活的一种
            StringBuilder sb = new StringBuilder();
            sb.Append("[");//json 开始
            foreach (var city in cityTable)
            {
                sb.Append("{");
                sb.AppendFormat(""CityId":"{0}","CityName":"{1}"",city.CityID,city.CityName);
                sb.Append("},");//这个逗号代表为下一个创造一个条件
            }
            string response = sb.ToString().TrimEnd(',') + "]";

            context.Response.Write(response);

第二种：后台输出json =>把一个集合自动转成json字符串

在后台一般处理程序定义一个内部类

public class CityData 
        {
            public int CityID { get; set; }
            public string CityName { get; set; }
        }

把DataTable里的对象元素加到List<CityData>中，然后调用javascript序列化的类来转换json传到前台

//把一个集合自动转成json字符串
            List<CityData> list = new List<CityData>();
            foreach (var c in cityTable)
            {
                list.Add(new CityData 
                {
                    CityID=c.CityID,
                    CityName=c.CityName
                });
            }
            //通过javascript序列化的类来进行转换
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            var response= js.Serialize(list);

这样我们简单的ajax异步省市联动就算完成了