ホームページ > 記事 > ウェブフロントエンド > jQuery HttpHandler XML を使用して 3 レベルの linkage_jquery をシミュレートする例
jQuery HttpHandler XML を使用して 3 レベルの linkage_jquery をシミュレートする例
- WBOYオリジナル
- 2016-05-16 18:03:39981ブラウズ
実装プロセスは次のとおりです。
ステップ 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; }
コードをコピー コードは次のとおりです。次のように:
public class City {
private string id;
///
///number
/// < ;/summary>
パブリック文字列 ID
{
get { return id; }
}
プライベート文字列名;
/ // Name
///
public string Name
{
get { return name; }
set { name = value; }
}
}
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
コードをコピーします ///
パブリック文字列 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-->
コードは次のとおりです:
///
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
{
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 List
{
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
{
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 を記述します。
コードをコピー コードは次のとおりです:
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-->
コードは次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。