主要学习代码：
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 > )
{
foreach (System.Data.DataRow item in dt.Rows)
{
pc = new Web.Model.PC(int.Parse(item[].ToString()), item[].ToString());
lpc.Add(pc);
}
}
return lpc;
}
}