jquery ajax 通过json取值并且进行联动

前台页面：

JS 部分：（这里的js如果单独写为一个js文件，貌似联动不起作用，所以建议大家还是放在页面里面（html、aspx））

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "IndexHandler.ashx",
                //我们用text格式接收
                //dataType: "text",
                //json格式接收数据
                dataType: "json",
                data: "meth=load&pid=0",
                success: function (msg) {
                    //实例2个字符串变量来拼接下拉列表
                    var vocaspec = "<select id=\"seVocaspec\" name=\"vocaspec\"><option value=\"-1\">--请选择--</option>";
                    //使用jquery解析json中的数据
                    $.each(msg.voce, function (n, value) {
                        vocaspec += ("<option value=\"" + value.code + "\">" + value.name);
                        vocaspec += ("</option>");
                    });
                    vocaspec += ("</select>");

                    $("#vocaspec").html(vocaspec);
                }
            });

            $("#seVocaspec").change(function () {
                if ($(this).val() == "-1") { $("#industr").remove(); return; }
                else {
                    $.ajax({
                        type: "POST",
                        url: "IndexHandler.ashx",
                        //我们用text格式接收
                        //dataType: "text",
                        //json格式接收数据
                        dataType: "json",
                        data: "meth=load&pid=" + $(this).val(),
                        success: function (msg) {
                            //实例2个字符串变量来拼接下拉列表
                            var industr = "<select name=\"industr\" id=\"industr\"><option value=\"-1\">--请选择--</option>";
                            //使用jquery解析json中的数据
                            $.each(msg.voce, function (n, value) {
                                industr += ("<option value=\"" + value.code + "\">" + value.name);
                                industr += ("</option>");
                            });
                            industr += ("</select>");

                            $("#industr").html(industr);
                        }
                    });
                }
            });
        });
    </script>

 

html部分：

   企业性质<div id="vocaspec">
    </div>
    行业类型<div id="industr">
    </div>

 

IndexHandler.ashx部分：（我这里只是一个简单的数据绑定取值，当然也可以从数据库取得数据，具体取数据查看项目实际情况）

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            //接收提交过来的meth参数
            string meth = context.Request.Params["meth"].ToString();
            string pid = context.Request.Params["pid"].ToString();
            //根据参数调用不同的方法
            switch (meth)
            {
                case "load":
                    loadjson(context, pid);
                    break;
            }
        }

        private void loadjson(HttpContext context, string pid)
        {
            //实例BLL
            List<Area> areaList = new List<Area>();

            if (pid == "0")
            {
                areaList.Add(new Area
                {
                    AreaID = "01",
                    AreaName = "罗湖区",
                    PID = "0"
                });
                areaList.Add(new Area
                {
                    AreaID = "02",
                    AreaName = "福田区",
                    PID = "0"
                });
            }

            if (pid == "01")
            {
                areaList.Add(new Area
                {
                    AreaID = "0101",
                    AreaName = "莲塘",
                    PID = "01"
                });
                areaList.Add(new Area
                {
                    AreaID = "0102",
                    AreaName = "黄贝岭",
                    PID = "01"
                });
            }
            if (pid == "02")
            {
                areaList.Add(new Area
                {
                    AreaID = "0201",
                    AreaName = "八卦岭",
                    PID = "02"
                });
                areaList.Add(new Area
                {
                    AreaID = "0202",
                    AreaName = "华强",
                    PID = "02"
                });
            }

            //实例一个StringBuilder 用来拼接一个json数据
            StringBuilder sbvoca = new StringBuilder();

            if (areaList != null && areaList.Count > 0)
            {
                sbvoca.Append("{\"voce\":[");
                int i = 1;
                int count = areaList.Count;
                foreach (Area dr in areaList)
                {
                    if (i == count)
                    {
                        sbvoca.Append("{\"code\":\"" + dr.AreaID + "\",\"name\":\"" + dr.AreaName + "\"}");
                    }
                    else
                    {
                        sbvoca.Append("{\"code\":\"" + dr.AreaID + "\",\"name\":\"" + dr.AreaName + "\"},");
                    }
                    i++;
                }
                sbvoca.Append("]");
            }
            sbvoca.Append("}");
            context.Response.Write(sbvoca.ToString());

            context.Response.End();
        }

        public class Area
        {
            public string AreaID { get; set; }
            public string AreaName { get; set; }
            public string PID { get; set; }
        }