• 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源码下载

  • 相关阅读:
    MVC基础
    JQuery基本知识、选择器、事件、DOM操作、动画
    LinQ各种方式查询、组合查询、IQueryable集合类型
    LinQ 创建连接、简单增删改查
    webform-AJAX
    JavaScricp(总回顾)
    响应式布局(收藏)
    webform:分页组合查询
    webform:图片水印、验证码制作
    【转】开发人员一定要加入收藏夹的网站
  • 原文地址:https://www.cnblogs.com/youmeng/p/2849618.html
Copyright © 2020-2023  润新知