ホームページ > 記事 > php教程 > プロトタイプ Ajax が XML ドキュメントを読み取ってリンケージドロップダウンボックスを実装する例

プロトタイプ Ajax が XML ドキュメントを読み取ってリンケージドロップダウンボックスを実装する例

WBOYオリジナル: 2016-06-21 08:53:411242ブラウズ

WEB2.0 の Web サイト開発に PHP を使用する場合、ユーザーエクスペリエンスを向上させるために Ajax テクノロジを使用することが必要になることがよくあります。現在、より一般的な Ajax 開発フレームワークには、Prototype、Jquery、Lightbox などが含まれます。今日はその方法を説明します。プロトタイプと XML ドキュメントを使用して、Ajax にリンクされたドロップダウンメニューを実装する例。

Ajax (非同期 JavaScript および XML) は、標準化されたレンダリングに XHTML と CSS を使用し、動的な表示と対話に DOM を使用し、データ交換と処理に XML と XSTL を使用し、非同期データの読み取りに XMLHttpRequest オブジェクトを使用し、バインドに Javascript を使用します。すべてのデータを処理します。

Ajax インスタンス (例) の説明

主な機能: プロトタイプを通じて XML コンテンツを解析し、州と都市間の第 2 レベルの連携を実現します。また、第 3 レベルおよび第 4 レベルの連携にも拡張できます

準備

プロトタイプをダウンロードし、関連する開発ディレクトリに配置します。この例では、プロトタイプの最新バージョンは 1.6 です。 http://www.prototypejs.org/download

州や都市に関連するデータベースを確立する

新しいフォームを作成し、2 つの選択ボックスを作成します。都道府県の選択ボックスには「ProvinceList」という名前が付けられ、都市の選択ボックスには「CityList」という名前が付けられます。

コード例

1	<script src="js/prototype.js">script>

<<🎜>script src=<🎜>"js/prototype.js"<🎜>>スクリプト>

コメント:prototype.js ファイルをインポート

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<スクリプト>
var targetSelect;

関数 getCity(選択,ターゲット,http)
{
targetSelect = target;

var URL = http + "?timeStamp=" + 新しい日付().getTime() + "&";
var パース = 'province_id='+select.options[select.selectedIndex]。値;

　　　var myAjax =new Ajax.Request(
URL、
{メソッド:'get',パラメータ:pars,onComplete:showDestObj}
);
}

関数 showDestObj(originalRequest)
{
var obj =originalRequest.responseXML;
var プロパティ = obj.getElementsByTagName("プロパティ") ;
　　　var 名前、値;
targetSelect.オプション.長さ =プロパティ。長さ+1;
RemoveAllOpt(targetSelect);

if(targetSelect.オプション.長さ >= 0) {
　　targetSelect.オプション[0] = 新しいオプション();
　　　　　targetSelect.オプション[0].値 = "0";
　　　　　targetSelect.オプション[0].テキスト = "请选择";
}

用 (var i=0,x=1;i<properties.length;i++,x++)
{
　　　　　名前 = プロパティ[i].getElementsByTagName("name" )[0].firstChild.nodeValue;
　　　　　値 = プロパティ[i].getElementsByTagName("値")[0].firstChild.nodeValue;
　　　　　targetSelect.オプション[x] = 新しいオプション();
　　　　　targetSelect.オプション[x].値 = 値;
　　　　　targetSelect.オプション[x].テキスト = 名前;
}
}

関数removeAllOpt(sel) {
var arr = sel.options;
for(var i=0; i<arr.長さ; i++) {
sel.削除(i);
}
}
スクリプト>

コメント :
targetSelect: ターゲットドロップダウンボックス、つまり cityList

を格納するグローバル変数

getCity 関数 は、特定の州のすべての都市を取得し、Ajax を起動し、必要なパラメーターを渡すために使用されます。 select パラメーターはソース操作の選択ボックス (provinceList) を表し、ターゲットパラメーターは自動的に更新される最終選択ボックス (cityList) を表し、http パラメーターは処理のためにバックグラウンドに送信される PHP 実行ファイルを表します。

8 行目: timeStamp= + new Date().getTime() を追加する理由は、返されたコンテンツを対話的に表示できない、つまり更新できないことを防ぐためです。

行 13: Ajax フォームを送信するには、get と post の 2 つの方法があります。これらは、通常の状況でフォームが送信された後に PHP がフォームを処理する方法と同じです。

特別な注意: Prototype get のコンテンツのエンコーディングは UTF8 であるため、データベースまたはページのエンコーディングと一致しない場合、中国語の文字化けの問題が発生します。適切なエンコーディング変換を使用する必要があります。実行環境が iconv 関数をサポートしている場合は、iconv 関数を使用してエンコード変換を行うこともできます。

showDestObj 関数 は、DOM 操作を通じて更新せずに、返されたコンテンツを処理し、ページのコンテンツを表示するために使用されます。通常、返されるコンテンツ形式はテキスト形式と xml 形式の 2 種類です。ここで返すコンテンツ形式は、responseXML を使用します。テキスト形式の場合は、responseText を使用します。

行 20: 指定されたタグ名を持つオブジェクトのコレクションを取得する getElementsByTagName() 関数は、指定されたタグ名を持つオブジェクトのコレクションを返すために使用されます。特定の州の都市に関する関連情報を生成するためにバックグラウンドループで生成される XML ドキュメントは次のとおりです。

行 23: removeAllOpt 関数は、返されたコンテンツが処理されるたびにターゲット選択ボックスをクリアするために使用されます 25～38行目: Prototypeで解析したXML後の内容を対象のセレクトボックスに与えてページに表示します。メソッドの呼び出し:

1
2
3
4
5
6
7
8
9
10
11
12

version="1.0" encoding="GB2312"?>
>
>
>城市ID>
>城市名称>
>

>
>城市ID>
>城市名称>
>
>

345

91011

1	<select name="provinceList" onChange="getCity(this,form1.cityList,'../ajax/province.php')">

バージョン="1.0" エンコーディング="GB2312"?> <プロパティ> <プロパティ> <値>都市 ID> <名前>都市名> > <プロパティ> <値>都市 ID> <名前>都市名> > >

1	<名前="provinceList" onChange="getCity( this,form1.cityList,'../ajax/province.php')">

概要:

上記は、WEB2.0 Web サイト開発に PHP を使用する場合に、Prototype を使用して XML ドキュメントを読み取り、セカンダリリンケージドロップダウンボックスを実装する方法の Ajax の例です。これは、より複雑な作業を開始するための比較的単純な例です。アプリケーションについては、Prototype にアクセスして、具体的なヘルプドキュメントを公式 Web サイトで確認してください。URL は http://www.prototypejs.org/learn です。次回は、Jquery を使用して上記の機能を実現する方法を共有します。

注意: PHP Web サイト開発チュートリアル-leapsoul.cn 転載の際は、元のソースとこの記述をリンクの形で明記してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：知っておくべき20のPHPライブラリ次の記事：知っておくべき20のPHPライブラリ

続きを見る

プロトタイプ Ajax が XML ドキュメントを読み取ってリンケージ ドロップダウン ボックスを実装する例

関連記事

プロトタイプ Ajax が XML ドキュメントを読み取ってリンケージドロップダウンボックスを実装する例