Ajax实现联动效果

最新推荐文章于 2019-07-16 12:12:50 发布

weixin_34309435

最新推荐文章于 2019-07-16 12:12:50 发布

阅读量92

点赞数

文章标签：数据库 xhtml javascript ViewUI

用到了地区的数据库

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();
    }

weixin_34309435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现联动效果

用到了地区的数据库html代码：&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head runat="server"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &
复制链接

扫一扫