jQuery HttpHandler XML を使用して 3 レベルの linkage_jquery をシミュレートする例-jsチュートリアル-php.cn

jQuery HttpHandler XML を使用して 3 レベルの linkage_jquery をシミュレートする例

WBOY

リリース： 2016-05-16 18:03:39

オリジナル

959 人が閲覧しました

実装プロセスは次のとおりです。
ステップ 1: xml ファイルを準備し、Area.xml という名前で Web サイトのルートディレクトリに配置します

コードをコピーコードは次のとおりです。

 
 🎜><省 id="1" name="北京"> 
 
<郡 id="1" name="東城区" /> 
 
<郡 ID="2" name="霊寿県" /> 

省> 
 
 " name="龍華区" />

ステップ 2 : XML ファイルで定義された要素に対応するエンティティクラスを作成します。
は州クラスに対応します

コードをコピー

コードは次のとおりです:

 
 public class 州 
{ 
private string id 
/// 
/// Number
/// 
public;文字列 ID 
{ 
get { return id; } 
set { id = value; } 
プライベート文字列名; 
/// 
/ // name
///  
パブリック文字列 Name 
{ 
get { return name; } 
set { name = value; } 
 
 
 City クラスに対応します: 

コードをコピーコードは次のとおりです。次のように:

public class City

{ 
private string id; 
///  
///number
/// < ;/summary> 
パブリック文字列 ID 
{ 
get { return id; } 
} 
プライベート文字列名;  
/ // Name
///  
public string Name 
{ 
get { return name; } 
set { name = value; } 
} 
 } 

 
対応する郡クラス: 

コードをコピー

コードは次のとおりです。 public class County {

private string id

///  
///  
パブリック文字列 ID 
{ 
get { return id; } 
set { id = value; 
} 
プライベート文字列名; 
///  
/// Name
///  
public string Name 
{ 
get { return name; >set { name = value; } 
 } 
} 

 
ステップ 3: サーバー側ハンドラー クラスを作成します: Handler.cs 

コードをコピーします

コードは次のとおりです:

///

2 /// ハンドラー
3 ///

4 public class Handler : IHttpHandler
5 {
6
7 private static static JavaScriptSerializer jss = new JavaScriptSerializer();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; = "failure";// デフォルトの戻り結果は失敗です
HttpRequest req = context.Request;
string田舎 = 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));
case "county; "://ユーザーが郡レベルのリストを取得する必要がある場合
result = jss.Serialize(GetCountyListByCity(province , city));
break;
デフォルト:
break;
}
}
// 結果をテキスト形式でクライアントに返します。
}
///
// / ドキュメントオブジェクトを初期化します
///
private void InitDoc()
{
if (doc == null)
{
doc = XDocument.Load (filePath);
}
}
///

// / 地方リストを初期化します
///
private List GetProvinceList()
{
List = new List();
if (doc != null)
{
XElement root = doc.Root; >foreach (var prov in root.XPathSelectElements("province"))
{
list.Add( new states()
{
Id = prov.Attribute("id").Value,
Name = prov.Attribute("name").Value
});
}
}
戻りリスト;
}
///
/// 州番号に基づいて市区町村番号を取得します
/// /// 州番号 private ListGetCityListByProvince(string provId)
{
List list = new List();
if (doc != null) = doc.Root;
//xpath 式: /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").値、
Name = city.Attribute("name").Value
});
}
}
戻りリスト
}
/// /// 州番号と市番号に基づいて郡番号を取得します
// /

/// 州番号
/// 市番号
private List GetCountyListByCity(string provId, string cityId)
{
List ; list = new List();
if (doc != null )
XElement root = doc.Root
string queryPath = "/area/province= '" provId "']/city[@id='" cityId "']/county ";
foreach (var county in root.Value,
Name = county.Attribute("name").Value
});
}
}
return list;
}
public bool IsReusable
{
get
{
return
}
}
}

ここでは、System.Xml.XPath 名前空間で XPathSelectElements(string xpath) メソッドと XPathSelectElement(string xpath) メソッドを使用して、xml をクエリします。この方法では、地方番号に基づいて市区町村番号を取得します。 xpath 式を使用します (渡された州番号が 1 であると仮定します):/area/province[@id='1']/city、この式は「/」で始まり、絶対パスの使用を示します。これは、エリアがルートノードであるためです。つまり、エリアから始まり、その下に州要素があります。そのエリアの下にあるすべての州要素のうち、id 属性値が 1 の州要素を取得したい場合は、/area/province[@id=] を使用できます。 '1']、つまり、州の後に条件 [@id='1'] を追加すると、エリアの下に id 属性が 1 の州要素を取得します。次に、province 要素の下にあるすべての都市を取得したいので、その後ろに /city を追加するだけで済み、最終的な xpath 式は /area/province[@id='1']/city になります。
また、このクエリの XML は現在の Web サイトのルートディレクトリにあるため、他の場所にある場合は、クエリを実行するときに名前空間を追加する必要があります。
XML ファイルから読み取られた値は、対応するディレクトリにアセンブルされます。エンティティオブジェクトを取得した後、System.Web.Script.Serialization 名前空間の JavaScriptSerializer クラスの Serialize メソッドを使用して、取得したエンティティオブジェクトを json データにシリアル化し、クライアントに返します。
ステップ 4: html と js を記述します。

コードをコピーコードは次のとおりです:

省、市、郡の 3 レベルリンクドロップダウンリスト
script type="text /javascript">
$(function () {
$.post("/Handler.ashx", { "type": "province" }, function (data, status) {
if ( status == "success") {
if (data != "failure") {
data = $.parseJSON(data); //サーバーから返された json データを解析します
for (var i = 0 ; i var value = data[i].Id ":" data[i].Name; // オプションの値を設定します形式: "number:name"
$("#province").append("");
}
}
}
}, "text");
$("#province").change(function () {
var selectValue = $(this). val(); //州オプションの選択された値を取得します
var provId = selectValue.split(':')[0] //数値を取得します
var provTxt = selectValue.split(':') [1]; //名前を取得します
$("#txtProvince").html(provTxt); //選択した州の名前を表示します
$("#city").html("< option>==都市を選択してください==< /option>"); //州レベルが変更されると都市レベルをクリアします
$("#county").html(""); //州レベルが変更されたときに郡レベルをクリア
$.post("/Handler.ashx", { "province": provId, "type": " city" }, function (データ, ステータス) {
if (ステータス == "成功") {
if (データ != "失敗") {
データ = $.parseJSON(データ);
for (var i = 0; i var value = data[i].Id ":" data[i].Name; ).append(""); "テキスト");
});
$("#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(""); //上記と同じ
$.post("/Handler.ashx", { "province": provId, "city": cityId, "type": "county" }, function (data, status) {
if (status == "success") {
if (data != "失敗") {
data = $.parseJSON(data);
for (var i = 0; i var value = data[i].Id " :" data[i].Name;
$("#county").append(" ") ;
}
}
}
}, "テキスト")
});
$("#county").change(function () {
$ ("#txtCounty").html($(this).val().split(':' )[1]) //選択した郡の名前を表示します
});

<--province-->