Ajax实现省市级联小练习---我的菜鸟之路-CSDN博客

1.页面

<head runat="server">
    <title></title>
    <style type="text/css">
        #main
        {
            width: 720px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid red;
            height: 600px;
        }
        .block
        {
            border: 1px solid blue;
            width: 200px;
            height: 400px;
            float: left;
        }
    </style>
    <script src="Js/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
        <div class="block">
            <select size="10" onchange="changeHander()" id="province">
                <option selected="selected">请选择</option>
                <option value="10">北京市</option>
                <option value="21">上海市</option>
                <option value="12">天津市</option>
                <option value="13">重庆市</option>
            </select>
        </div>
        <div class="block">
            <select size="10" id="areaList">
            </select>
        </div>
        <script type="text/javascript">
            function changeHander() {
                var provinceID = $("#province").val();
                $.ajax({
                    type: "POST",
                    url: "GetData.ashx",
                    data: "provinceID=" + provinceID,
                    success: function (data) {
                        data = $.trim(data);
                        $("#areaList").html(data);
                    }
                });
            }
        </script>
    </div>
    </form>
</body>

2.一般处理程序

namespace GetDataByAjax
{
    /// <summary>
    /// GetData 的摘要说明
    /// </summary>
    public class GetData : IHttpHandler
    {
        public List<City> list = null;

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            this.GetDataList();
            this.GetProvince(context);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="content"></param>
        protected void GetProvince(HttpContext content)
        {
            int id = int.Parse(content.Request["provinceID"]);
            List<City> listCity = list.Where(t => t.ProvinceID == id).ToList();
            string op = "<option value='{0}'>{1}</option>";
            StringBuilder result = new StringBuilder();
            foreach (City t in listCity)
            {
                result.AppendFormat(op, t.ProvinceID, t.CityName);
            }
            content.Response.Write(result.ToString());//--页面时data接收
        }
        /// <summary>
        /// 获取城市数据源
        /// </summary>
        public void GetDataList()
        {
            list = new List<City>();
            list.Add(new City() { CityID = 1, ProvinceID = 10, CityName = "东城区" });
            list.Add(new City() { CityID = 2, ProvinceID = 10, CityName = "西城区" });
            list.Add(new City() { CityID = 3, ProvinceID = 10, CityName = "海淀区" });
            list.Add(new City() { CityID = 4, ProvinceID = 10, CityName = "朝阳区" });
            list.Add(new City() { CityID = 5, ProvinceID = 21, CityName = "浦东区" });
            list.Add(new City() { CityID = 6, ProvinceID = 21, CityName = "张江高科" });
            list.Add(new City() { CityID = 7, ProvinceID = 12, CityName = "河西区" });
            list.Add(new City() { CityID = 8, ProvinceID = 12, CityName = "河东区" });
            list.Add(new City() { CityID = 9, ProvinceID = 12, CityName = "津南区" });
            list.Add(new City() { CityID = 10, ProvinceID = 13, CityName = "万谷渠" });
            list.Add(new City() { CityID = 11, ProvinceID = 13, CityName = "重庆市" });
        }
    }
}