zoukankan      html  css  js  c++  java
  • Ajax实现联动效果

    用到了地区的数据库

    html代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="script/jquery-1.7.1.js"></script>
        <script language="javascript">
            $(document).ready(function () {
                fillProv();//加载省份,加载省份的函数中调用了加载城市的函数,记载城市的函数调用了加载县市区的函数(为了防止异步传输页面加载不出东西)
                //添加事件
                //给省份添加事件
                $("#ddlProv").change(function () {
                    fillCity();
                });//change
                $("#ddlCity").change(function () {
                    fillCountry();
                });//change
            });//ready
    
            function fillProv() {
                $.ajax({
                    url: "LianDong.ashx",
                    data: { parent: "0001" },
                    type: "POST",
                    dataType: "XML",
                    success: function (data) {
                        //解析XML
                        $("#ddlProv").empty();//加载之前清空下拉
                        var arr = $(data).find("item");
                        for (var i = 0; i < arr.length; i++) {
                            var code = arr.eq(i).attr("code");
                            var name = arr.eq(i).attr("name");
                            //显示HTML
                            //var op = "<option value='" + code + "'>" + name + "</option>";
                            $("#ddlProv").append("<option value='" + code + "'>" + name + "</option>");
                        };//for
                        fillCity();
                    }//success
                });//ajax
            }
                function fillCity()
                {
                    var parent=$("#ddlProv").val();
                    $.ajax({
                        url: "LianDong.ashx",
                        data: { parent: parent },
                        type: "POST",
                        dataType: "XML",
                        success: function (data)
                        {
                            $("#ddlCity").empty();//加载之前清空下拉
                            //解析
                            var arr = $(data).find("item");
                            for (var i = 0; i < arr.length; i++) {
                                var code = arr.eq(i).attr("code");
                                var name = arr.eq(i).attr("name");
                                //显示HTML
                                $("#ddlCity").append("<option value='" + code + "'>" + name + "</option>");
                            }//for
                            fillCountry();
                        }//success
                    });//ajax
                }
                function fillCountry()
                {
                    var parent = $("#ddlCity").val();
                    $.ajax({
                        url: "LianDong.ashx",
                        data: { parent: parent },
                        type: "POST",
                        dataType: "XML",
                        success: function (data)
                        {
                            $("#ddlCountry").empty();//加载之前清空下拉
                            //解析
                            var arr = $(data).find("item");
                            for (var i = 0; i < arr.length; i++) {
                                var code = arr.eq(i).attr("code");
                                var name = arr.eq(i).attr("name");
                                //显示
                                $("#ddlCountry").append("<option value='" + code + "'>" + name + "</option>");
                            }
                        }//success
                    });//ajax
                }
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="ddlProv" runat="server"></asp:DropDownList>
                <asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
                <asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
            </div>
        </form>
    </body>
    </html>

    服务端代码:

    public class LianDong : IHttpHandler {
        private MyDBDataContext _Context = new MyDBDataContext();
        public void ProcessRequest (HttpContext context) {
            //获取请求过来的值
            var s = context.Request["parent"];
            StringBuilder sb = new StringBuilder();//命名空间using System.Text;
            string rel = null;
            //根据请求过来的值查询相应的数据
            var query = this._Context.ChinaStates.Where(r => r.ParentAreaCode == s);
            if (query.Count()>0)
            {
                foreach (ChinaStates data in query)
                {
                    sb.Append("<item code='" + data.AreaCode + "' name='" + data.AreaName + "'/>");
                }
            }
            //回发xml
            rel = sb.ToString();
            context.Response.Write("<?xml version='1.0'?>");
            context.Response.Write("<root>");
            context.Response.Write(rel);
            context.Response.Write("</root>");
            context.Response.End();
        }
  • 相关阅读:
    java_JDBC(3)
    java_JDBC(2)
    java_JDBC(1)
    seq语句随笔
    bzoj3159: 决战
    bzoj3905: Square
    bzoj3864: Hero meet devil
    有上下界的网络流问题
    uva12538
    bzoj3280: 小R的烦恼
  • 原文地址:https://www.cnblogs.com/gchlcc/p/4834617.html
Copyright © 2011-2022 走看看