[黑马程序员]ajax 城市三级联动

最新推荐文章于 2023-07-12 21:52:12 发布

原创最新推荐文章于 2023-07-12 21:52:12 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #string #function #json #output #服务器

ASP.NET 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于jQuery的省市县三级联动下拉框的实现方案，包括客户端JavaScript代码和服务器端C#代码。该方案通过AJAX技术实现实时获取数据并更新下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

客户端代码

<html>
<head>
    <title></title>
    <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            //初始化省份列表
            //参数id为向服务器所要请求级别
            //1:为省份
            //2：为城市
            //3：为区县
            //value：0为省份的加载，其他的选中项的值
            $.post("ashx/Address.ashx", { id: 1, value: 0 }, function (data, status) {
                //将data装换成object
                var json = eval("(" + data + ")");
                //移除省份中的所有项
                $("#sltProvince option").remove();
                //添加省份中的默认选项
                $("#sltProvince").append("<option value='0'>-请选择省份-</option>");
                //遍历json对象的项，并装换成控件添加到省份下拉菜单中
                $.each(json.p, function (index, item) {
                    $("#sltProvince").append("<option value='" + item.id + "'>" + item.value + "</option>");
                });
            });

            //省份下拉菜单的更改选项事件
            $("#sltProvince").change(function () {
                //获取省份的id值
                var val = $(this).val();

                $("#sltCity option").remove();
                $("#sltCity").append("<option value='0'>-请选择城市-</option>");
                $("#sltDistrict option").remove();
                $("#sltDistrict").append("<option value='0'>-请选择县区-</option>");

                //如果val为0，说明没有选择省份
                //所以将城市和县区的选项都更改成默认的状态
                if (val == "0") {
                    return;
                }
                else {
                    //通过ajax与服务器交互，获取选中省份对应的所有城市，添加到城市下来菜单中
                    $.post("ashx/Address.ashx", { id: 2, value: val }, function (data, status) {
                        var json = eval("(" + data + ")");
                        $.each(json.c, function (index, item) {
                            $("#sltCity").append("<option value='" + item.id + "'>" + item.value + "</option>");
                        });
                    });
                }
            });

            //城市下来菜单的更改事件
            $("#sltCity").change(function () {
                //选中的城市的值
                var val = $(this).val();

                $("#sltDistrict option").remove();
                $("#sltDistrict").append("<option value='0'>-请选择县区-</option>");

                //如果val为0，说明没有选择城市
                //所以将县区的选项都更改成默认的状态
                if (val == "0") {
                    return;
                }
                else {
                    //通过ajax与服务器交互，获取选中省份对应的所有城市，添加到城市下来菜单中
                    $.post("ashx/Address.ashx", { id: 3, value: val }, function (data, status) {
                        var json = eval("(" + data + ")");
                        $.each(json.d, function (index, item) {
                            $("#sltDistrict").append("<option value='" + item.id + "'>" + item.value + "</option>");
                        });
                    });
                }
            });
        });
    </script>
</head>
<body  style="background-color:#d3eaaf">
        <select id="sltProvince" style=" width:120px;">
            <option value="0">-请选择省份-</option>
        </select>
        <select id="sltCity" style=" width:120px;">
            <option value="0" >-请选择城市-</option>
        </select>
        <select id="sltDistrict" style=" width:120px;">
            <option value="0">-请选择县区-</option>
        </select>   
</body>
</html>

服务器端代码（ashx）

<%@ WebHandler Language="C#" Class="Address" %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public class Address : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //获取id属性
        string id = context.Request["id"];
        //获取value   这个value是查询的条件
        string value = context.Request["value"];
        string output = "";//最终要输出的信息

        //请求省份信息
        if (id == "1")
        {
            output = GetProvince();
        }
        //请求城市信息  这是value的选中的省份的id
        else if (id == "2")
        {
            //如果value==0，说明没有选择省份
            if (value == "0")
            {
                return;
            }
            else
            {
                //获取指定省份的城市的信息（json格式的字符串）
                output = GetCity(value);
            }
        }
        //请求的县区的信息，这里value的值为选中的城市的id
        else if (id == "3")
        {
            //如果value==0，说明没有选择城市
            if (value == "0")
            {
                return;
            }
            else
            {
                //获取指定城市的县区的信息（json格式的字符串）
                output = GetDistrict(value);
            }
        }
        context.Response.Write(output);
    }

    /// <summary>
    /// 获取省份的信息
    /// </summary>
    /// <returns>返回获得省份信息（json格式）</returns>
    private string GetProvince()
    {
        SqlDataReader dr=DBOperater.getDataReader("SELECT * FROM S_Province");       
        string ProvinceMsg = "";//存储省份信息的变量
        while (dr.Read())
        {
            //将字符串拼接成json格式
            ProvinceMsg += "{id:" + dr["ProvinceID"].ToString() + ",value:'" + dr["ProvinceName"].ToString() + "'},";
        }
        DBOperater.getConnection().Close();//关闭数据库连接
        ProvinceMsg = ProvinceMsg.Substring(0, ProvinceMsg.Length - 1);
        ProvinceMsg = "{p:[" + ProvinceMsg + "]}";//拼接后最终的格式信息
        return ProvinceMsg;
    }

    /// <summary>
    /// 根据省份信息获取城市信息
    /// </summary>
    /// <param name="value">省份id号</param>
    /// <returns>城市的信息(json格式)</returns>
    private string GetCity(string value)
    {
        SqlDataReader dr = DBOperater.getDataReader("SELECT * FROM S_City where ProvinceID='" + value + "'");        
        string CityMsg = "";//存储城市信息的变量
        while (dr.Read())
        {
            CityMsg += "{id:" + dr["CityID"].ToString() + ",value:'" + dr["CityName"].ToString() + "'},";
        }
        DBOperater.getConnection().Close();//关闭数据库连接
        CityMsg = CityMsg.Substring(0, CityMsg.Length - 1);
        CityMsg = "{c:[" + CityMsg + "]}";
        return CityMsg;
    }

    /// <summary>
    /// 获取区县信息
    /// </summary>
    /// <param name="value">城市的id</param>
    /// <returns>县区的信息(json格式)</returns>
    private string GetDistrict(string value)
    {
        SqlDataReader dr=DBOperater.getDataReader("SELECT * FROM S_District where CityID='" + value + "'");
        string DistrictMsg = "";//存储县区信息的变量
        while (dr.Read())
        {
            DistrictMsg += "{id:" + dr["DistrictID"].ToString() + ",value:'" + dr["DistrictName"].ToString() + "'},";
        }
        DBOperater.getConnection().Close();//关闭数据库连接
        DistrictMsg = DistrictMsg.Substring(0, DistrictMsg.Length - 1);
        DistrictMsg = "{d:[" + DistrictMsg + "]}";
        return DistrictMsg;
    }


    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------