主要学习代码：
List.html
<script type="text/javascript">
function GetXhr() {
return new XMLHttpRequest();
}
var getCities = function () {
//alert(this.options[this.selectedIndex].value);
//清空列表
var cities = document.getElementById("sltCity");
cities.options.length = 0;
var id = this.options[this.selectedIndex].value;
var xhr = GetXhr();
xhr.open("post", "List.ashx", true);
//post方式添加
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//post方式永远不会使用浏览器的缓存
//设置不使用浏览器缓存
//xhr.setRequestHeader("If-Modified-Since", "0");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = eval(xhr.response);
for (var i = 0; i < json.length; i++) {
var node=document.createElement("option");
node.innerHTML=json[i].Name;
cities.appendChild(node);
}
}
};
xhr.send("pId=" + id);
};
function getProvinces() {
//创建异步请求对象
var xhr = GetXhr();
// alert(xhr.readyState);//0
//设置参数
xhr.open("get", "List.ashx", true);
// alert(xhr.readyState);//1
xhr.onreadystatechange = function () {
// alert(xhr.readyState);//4
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// var s = [{ id: 1, name: 'value' }];
var cont = eval(xhr.responseText);
// alert(cont[0]);
//alert(cont.length);
var slt = document.getElementById("sltProvince");
for (var i = 0; i < cont.length; i++) {
slt.options[i] = new Option(cont[i].Name, cont[i].ID);
}
} else {
alert("服务器繁忙，请稍后在试。");
}
}
};
//alert(xhr.readyState);//1
//发送请求
xhr.send();//post方式填写参数
//alert(xhr.readyState);//1
};
window.onload = function () {
getProvinces();
document.getElementById("sltProvince").onchange = getCities;
};
</script>
</head>
<body>
省：
<select id="sltProvince">
</select>
市：<select id="sltCity">
</select>
</body>
List.ashx:
<%@ WebHandler Language="C#" Class="List" %> using System; using System.Web; using System.Collections.Generic;//List
//序列化命名空间
using System.Web.Script.Serialization; public class List : IHttpHandler { private Web.BLL.Transfer transfer = null; private List<Web.Model.PC> lpc = null; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; string id = context.Request.Form["pId"]; if (!string.IsNullOrEmpty(id)) { //第二种方式 //市 transfer = new Web.BLL.Transfer(); JavaScriptSerializer serializer = new JavaScriptSerializer(); lpc = transfer.GetProvincesOrCities(int.Parse(id)); //这样返回的json自动以属性为键。 //[{"Name":"白城市","Id":94}, string json = serializer.Serialize(lpc); context.Response.Write(json); } else { //第一种方式 //省 transfer = new Web.BLL.Transfer(); lpc = transfer.GetProvincesOrCities(0); System.Text.StringBuilder sb = new System.Text.StringBuilder(500); //拼接json字符串 sb.Append("["); foreach (Web.Model.PC item in lpc) { sb.Append("{ID:" + item.Id + ",Name:'" + item.Name + "'},"); } sb.Remove(sb.Length - 1, 1).Append("]"); context.Response.Write(sb.ToString()); } }
Web.BAL
public class DataAction { private List<Web.Model.PC> lpc = null; private Web.Model.PC pc = null; public DataAction() { lpc = new List<Web.Model.PC>(); } public List<Web.Model.PC> GetProvincesOrCities(int pId) { string sql = "select * from TblArea where AreaPId={0}"; sql = string.Format(sql, pId); System.Data.DataTable dt = SqlHelper.ExecuteDataTable(sql); if (dt.Rows.Count > 0) { foreach (System.Data.DataRow item in dt.Rows) { pc = new Web.Model.PC(int.Parse(item[0].ToString()), item[1].ToString()); lpc.Add(pc); } } return lpc; } }