Jquery Ajax实例(二)省市联动

其实，用的最多的算是省市联动了

直接上代码了

aspx页面：

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>省市联动</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
    <!--Ajax.Js文件-->
    <script type="text/javascript">
        $(function () {
        //触发事件
            $("#sProvince").change(function () {
                var code = $(this).val();
                //Ajax
                $.post(ajax.getPath("GetCity"), {
                    _code: code
                }, function (data) {
                    var json = Tool.getJSON(data);//解析成Json
                    $("#sCity").empty().append($("<option></option>").val("0").html("请选择"));
                    for (var i = 0; i < json.length; i++) {
                        $("#sCity").append($("<option></option").val(json[i].ID).html(json[i].Name));
                    };
                });
            });
        });
        function setSubbranchValue() {
            $("#hdProvince").val($("#sProvince").val());
            $("#hdCity").val($("#sCity").val());
           alert("省/直辖市ID："+ $("#hdProvince").val()+"城市ID："+ $("#hdCity").val());
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <!--隐藏域，方便后台调用-->
        <asp:HiddenField ID="hdProvince" runat="server" />
        <asp:HiddenField ID="hdCity" runat="server" />
        <select id="sProvince" onchange="Link.Change(this.options[this.selectedIndex].value);">
            <%=_Province%>
        </select>
        <span></span>
        <select id="sCity" onchange="setSubbranchValue();">
            <option value="0">请选择</option>
            <%=_City%>
        </select>
    </div>
    </form>
</body>
</html>

cs页面：其实没什么用途只是进行初始化数据：

View Code

 protected StringBuilder _Province = new StringBuilder();
    protected StringBuilder _City = new StringBuilder();
   
    protected void Page_Load(object sender, EventArgs e)
    {
        _Province.AppendFormat("<option value=\"{0}\">{1}</option>", "1", "北京");
        _Province.AppendFormat("<option value=\"{0}\">{1}</option>", "2", "上海");

        _City.AppendFormat("<option value=\"{0}\">{1}</option>", "11", "朝阳区");
        _City.AppendFormat("<option value=\"{0}\">{1}</option>", "12", "海淀区");
    }

ashx页面：

便于方便没有调用数据库。直接用List进行的操作

View Code

 public void ProcessRequest(HttpContext context)
    {
        string action = context.Request.QueryString["action"];
        switch (action)
        {
            case "Show":
                Show(); break;
            case "Login":
                Login(); break;
            case "GetCity"://联动调用该方法
                GetCity();break;
        }
    }
  //城市类，便于测试
    public class City
    {
        public string Name { get; set; }

        public int ID { get; set; }
    }
    protected static void GetCity()
    {
        List<City> lstCity;

        int code = Convert.ToInt32(HttpContext.Current.Request["_code"]);
        //进行数据库操作
        //现在我们用List<>来代替
        if (code == 1)
        {
            lstCity = new List<City>() 
            { 
                new City(){ID=11,Name="朝阳区"},
                new City(){ID=12,Name="海淀区"}
            };
        }
        else
        {
            lstCity = new List<City>() 
            { 
                new City(){ID=21,Name="黄浦区"},
                new City(){ID=22,Name="徐汇区"}
            };
        }
        WriteString(lstCity);//转化为Json格式

    }
    /// <summary>
    /// 将列表转化为Json格式
    /// </summary>
    /// <param name="lstCity"></param>
    public static void WriteString(List<City> lstCity)
    {
        StringBuilder Json = new StringBuilder();
        Json.Append("[");
        if (lstCity.Count > 0)
        {
            for (int i = 0; i < lstCity.Count; i++)
            {
                Json.Append("{");
                Json.AppendFormat("\"Name\":\"{0}\",", lstCity[i].Name);
                Json.AppendFormat("\"ID\":\"{0}\"", lstCity[i].ID);
                Json.Append("}");
                if (i < lstCity.Count - 1)
                {
                    Json.Append(",");
                }
            }
        }
        Json.Append("]");

        HttpContext.Current.Response.ContentType = "text/plain";
        HttpContext.Current.Response.Write(Json.ToString());
        //HttpContext.Current.Response.Flush();
        HttpContext.Current.Response.End(); ;
    }

完成Demo源码下载