欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用jQuery+HttpHandler+xml模擬一個三級聯(lián)動的例子

 更新時間：2011年08月09日 12:16:16   作者：  
昨天同學(xué)問我有關(guān)如何快速讀取多層級xml文件的問題，于是我就使用省、市、縣模擬了一個三級聯(lián)動的例子，客戶端使用jQuery實(shí)現(xiàn)異步加載服務(wù)器返回的json數(shù)據(jù)，服務(wù)器端則使用XPath表達(dá)式查詢數(shù)據(jù)。
如下是實(shí)現(xiàn)過程：
第一步：準(zhǔn)備xml文件，并放置在網(wǎng)站根目錄下，名為Area.xml
復(fù)制代碼 代碼如下:

<?xml version="1.0" encoding="utf-8" ?>
<area>
<province id="1" name="北京">
<city id="1" name="北京">
<county id="1" name="東城區(qū)" />
<county id="2" name="西城區(qū)" />
</city>
</province>
<province id="2" name="河北省">
<city id="1" name="石家莊市">
<county id="1" name="正定縣" />
<county id="2" name="靈壽縣" />
</city>
<city id="2" name="邯鄲市">
<county id="1" name="邯鄲縣" />
<county id="2" name="永年縣" />
</city>
</province>
<province id="3" name="海南省">
<city id="1" name="?？谑?>
<county id="1" name="龍華區(qū)" />
<county id="2" name="秀英區(qū)" />
<county id="3" name="美蘭區(qū)" />
</city>
<city id="2" name="三亞市">
<county id="1" name="天涯鎮(zhèn)" />
<county id="2" name="鳳凰鎮(zhèn)" />
</city>
</province>
</area>

第二步：創(chuàng)建與xml文件中定義的元素對應(yīng)的實(shí)體類。
<province/>對應(yīng)province類
復(fù)制代碼 代碼如下:

public class Province
{
private string id;
/// <summary>
/// 編號
/// </summary>
public string Id
{
get { return id; }
set { id = value; }
}
private string name;
/// <summary>
/// 名稱
/// </summary>
public string Name
{
get { return name; }
set { name = value; }
}
}

<city/>對應(yīng)City類：
復(fù)制代碼 代碼如下:

public class City
{
private string id;
/// <summary>
/// 編號
/// </summary>
public string Id
{
get { return id; }
set { id = value; }
}
private string name;
/// <summary>
/// 名稱
/// </summary>
public string Name
{
get { return name; }
set { name = value; }
}
}

<county/>對應(yīng)county類：
復(fù)制代碼 代碼如下:

public class County
{
private string id;
/// <summary>
/// 編號
/// </summary>
public string Id
{
get { return id; }
set { id = value; }
}
private string name;
/// <summary>
/// 名稱
/// </summary>
public string Name
{
get { return name; }
set { name = value; }
}
}

第三步：編寫服務(wù)器端處理程序類：Handler.cs
復(fù)制代碼 代碼如下:

/// <summary>
2 /// 處理程序
3 /// </summary>
4 public class Handler : IHttpHandler
5 {
6
7 private static XDocument doc;
8 private string filePath = HttpContext.Current.Server.MapPath("~/Area.xml");
9 //javascript序列化類
private static JavaScriptSerializer jss = new JavaScriptSerializer();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string result = "failure";//默認(rèn)返回結(jié)果為失敗
HttpRequest req = context.Request;
string province = req["province"];//獲取用戶選擇的省的編號
string city = req["city"];//獲取用戶選擇的市的編號
string county = req["county"];//獲取用戶選擇的縣的編號
string type = req["type"];//獲取用戶需要獲取的省市縣列表的類型
InitDoc();
if (type.HasValue())
{
switch (type.ToLower())
{
case "province"://如果用戶需要獲取省級列表
result = jss.Serialize(GetProvinceList());
break;
case "city"://如果用戶需要獲取的是市級列表
result = jss.Serialize(GetCityListByProvince(province));
break;
case "county"://如果用戶需要獲取的是縣級列表
result = jss.Serialize(GetCountyListByCity(province, city));
break;
default:
break;
}
}
//將結(jié)果以文本的格式返回給客戶端
context.Response.Write(result);
}
/// <summary>
/// 初始化文檔對象
/// </summary>
private void InitDoc()
{
if (doc == null)
{
doc = XDocument.Load(filePath);
}
}
/// <summary>
/// 初始化省級列表
/// </summary>
private List<Province> GetProvinceList()
{
List<Province> list = new List<Province>();
if (doc != null)
{
XElement root = doc.Root;
foreach (var prov in root.XPathSelectElements("province"))
{
list.Add(new Province()
{
Id = prov.Attribute("id").Value,
Name = prov.Attribute("name").Value
});
}
}
return list;
}
/// <summary>
/// 根據(jù)省級編號獲取市級編號
/// </summary>
/// <param name="provId">省級編號</param>
private List<City> GetCityListByProvince(string provId)
{
List<City> list = new List<City>();
if (doc != null)
{
XElement root = doc.Root;
//xpath表達(dá)式：/area/province[@id='1']/city
string queryPath = "/area/province[@id='" + provId + "']/city";
foreach (var city in root.XPathSelectElements(queryPath))
{
list.Add(new City()
{
Id = city.Attribute("id").Value,
Name = city.Attribute("name").Value
});
}
}
return list;
}
/// <summary>
/// 根據(jù)省級編號和市級編號獲取縣級編號
/// </summary>
/// <param name="provId">省級編號</param>
/// <param name="cityId">市級編號</param>
private List<County> GetCountyListByCity(string provId, string cityId)
{
List<County> list = new List<County>();
if (doc != null)
{
XElement root = doc.Root;
string queryPath = "/area/province[@id='" + provId + "']/city[@id='" + cityId + "']/county";
foreach (var county in root.XPathSelectElements(queryPath))
{
list.Add(new County()
{
Id = county.Attribute("id").Value,
Name = county.Attribute("name").Value
});
}
}
return list;
}
public bool IsReusable
{
get
{
return false;
}
}
}

在這里，查詢xml我采用的是System.Xml.XPath命名空間下的XPathSelectElements(string xpath)方法和XPathSelectElement(string xpath)方法，在根據(jù)省級編號獲取市級編號的方法里面，我使用了xpath表達(dá)式（假設(shè)傳入的省級編號為1）：/area/province[@id='1']/city，這個表達(dá)式以“/”開頭，表示使用絕對路徑，因?yàn)閍rea為根節(jié)點(diǎn)所以從area開始，接著它下面有province元素，當(dāng)我想獲取area下所有province元素中id屬性值為1的province元素時，我可以使用/area/province[@id='1']，即在province后面加上[@id='1']這個條件，這時我就獲取到了area下id屬性為1的province元素了。接著我要獲取該province元素下所有的city，那么只需在后面加上/city即可，所以最終的xpath表達(dá)式為：/area/province[@id='1']/city。
還有，因?yàn)榇瞬樵兊膞ml是在當(dāng)前網(wǎng)站的根目錄，如果是在其它地方，那么在查詢的時候要加上namespace
將從xml文件中讀取到的值組裝成對應(yīng)的實(shí)體對象只后，我使用了System.Web.Script.Serialization命名空間下的JavaScriptSerializer類中的Serialize方法將得到的實(shí)體對象序列化成json數(shù)據(jù)返回給客戶端。
第四步：編寫html和js。
復(fù)制代碼 代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>省市縣三級聯(lián)動下拉列表</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.post("/Handler.ashx", { "type": "province" }, function (data, status) {
if (status == "success") {
if (data != "failure") {
data = $.parseJSON(data); //解析服務(wù)器返回的json數(shù)據(jù)
for (var i = 0; i < data.length; i++) {
var value = data[i].Id + ":" + data[i].Name; //設(shè)置option選項(xiàng)的值，格式為："編號:名稱"
$("#province").append("<option value='" + value + "'>" + data[i].Name + "</option>");
}
}
}
}, "text");
$("#province").change(function () {
var selectValue = $(this).val(); //獲取選擇的省級option的值
var provId = selectValue.split(':')[0]; //取出編號
var provTxt = selectValue.split(':')[1]; //取出名稱
$("#txtProvince").html(provTxt); //顯示選擇的省的名稱
$("#city").html("<option>==請選擇市==</option>"); //當(dāng)省級改變時將市級清空
$("#county").html("<option>==請選擇縣==</option>"); //當(dāng)省級改變時將縣級清空
$.post("/Handler.ashx", { "province": provId, "type": "city" }, function (data, status) {
if (status == "success") {
if (data != "failure") {
data = $.parseJSON(data);
for (var i = 0; i < data.length; i++) {
var value = data[i].Id + ":" + data[i].Name;
$("#city").append("<option value='" + value + "'>" + data[i].Name + "</option>");
}
}
}
}, "text");
});
$("#city").change(function () {
var provId = $("#province").val().split(':')[0];
var selectValue = $(this).val(); //同上
var cityId = selectValue.split(':')[0]; //同上
var cityTxt = selectValue.split(':')[1]; //同上
$("#txtCity").html(cityTxt); //顯示選擇的市的名稱
$("#county").html("<option>==請選擇縣==</option>"); //同上
$.post("/Handler.ashx", { "province": provId, "city": cityId, "type": "county" }, function (data, status) {
if (status == "success") {
if (data != "failure") {
data = $.parseJSON(data);
for (var i = 0; i < data.length; i++) {
var value = data[i].Id + ":" + data[i].Name;
$("#county").append("<option value='" + value + "'>" + data[i].Name + "</option>");
}
}
}
}, "text");
});
$("#county").change(function () {
$("#txtCounty").html($(this).val().split(':')[1]); //顯示選擇的縣的名稱
});
});
</script>
</head>
<body>
<!--省-->
<select id="province" name="province">
</select>
<!--市-->
<select id="city" name="city">
</select>
<!--縣-->
<select id="county" name="county">
</select>
<br />
<span id="txtProvince" style="color: #ff0000;"></span>- <span id="txtCity" style="color: #ff0000;"></span>- <span id="txtCounty" style="color: #ff0000;"></span>
</body>
</html>

關(guān)于使用jQuery與服務(wù)器通信，我使用的是$.post方法，該方法的具體使用可以參考jQuery官方文檔，這里我想說的是，遍歷后通過對象.屬性訪問時，這個屬性的名字是區(qū)分大小寫的，這個名字是服務(wù)器端定義的名字，因?yàn)榉?wù)器序列化的是服務(wù)器端的實(shí)體對象。
在這個例子中，關(guān)鍵點(diǎn)就是如何使用XPath表達(dá)式，如何調(diào)用System.Xml.XPath命名空間下的XPathSelectElements(string xpath)方法。
最終結(jié)果如下圖：

代碼13，31，50行可以優(yōu)化。
不建議多次修改DOM結(jié)構(gòu)，可以拼接字符串后一次append
數(shù)據(jù)源是xml，我會用xslt來解析xml直接輸出<option>，這樣就不用再前臺拼接字符串了。要求所有節(jié)點(diǎn)ID不能有相同。
復(fù)制代碼 代碼如下:

<select id="province" name="province" next="#city">
</select>
<select id="city" name="city" next="#county">
<option>==請選擇市==</option>
</select>
</form>
<select id="county" name="county">
<option>==請選擇縣==</option>
</select>

<script type="text/javascript">
$("#province,#city").change(function () {
var nextSelect = $(this.getAttribute("next"));

//if (nextSelect.size() > 0) {
nextSelect.find("option:gt(0)").remove();

var _id = $(this).find("option:selected").val();
var query = { parentId: _id };
$.get("/Handler.ashx", query, function (data, status) {
//...
nextSelect.append("<option>...</option>....");
});
//}
});
</script>

相關(guān)文章

最新評論