[黑马程序员]ajax 城市三级联动
来源：互联网 发布：调查问卷挣钱知乎 编辑：程序博客网 时间：2024/06/05 12:01
---------------------- 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培训、期待与您交流！ ----------------------
- [黑马程序员]ajax 城市三级联动
- JavaScript~ajax~城市三级联动
- 黑马程序员-城市联动
- 基于Java的ajax城市三级联动
- 城市三级联动
- 城市三级联动
- js 城市三级联动
- 城市的三级联动
- 城市三级联动
- 城市的三级联动
- 省份城市三级联动
- 全国城市三级联动
- Android 城市三级联动
- 城市列表-三级联动
- 城市三级联动
- 城市三级联动
- 城市三级联动
- 城市三级联动
- CrossTab類型報表取得動態欄位值.
- 深入分析request_irq的dev_id参数作用
- sap 预留
- DML对undo的影响
- 关于对EASbos 分录设定默认值
- [黑马程序员]ajax 城市三级联动
- Android开发者必须深入学习的10个应用开源项目
- WMAppManifest.xml文件结构
- Eclipse Plun-in development reference
- javascript设置缺省选中
- How to read Android crash log and stack trace
- 迷失在程序中的日子里
- 三维坐标系变换
- Android的广播机制
