PHP+Ajax+JS 都道府県と市区町村の3階層連携_PHPチュートリアル

基本的な考え方は、JS で選択コントロールのオプションを動的に作成し、SQL データベースから取得した州と市の情報を Ajax を介して取得するというものです。コードは少し長いですが、多くは似ています。 PHP では、異なるパラメータを通じて異なる選択ステートメントが実行されます。

index.html コード:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< ;html xmlns="http://www.w3.org/1999/xhtml">

thumbnails.js コード: ​ ​ window.onload = getProvince; ​ function createRequest() {//Ajax には PHP 対話用のオブジェクトが必要です 試す { Request = new XMLHttpRequest();//新しいリクエスト オブジェクトを作成します。 キャッチ (tryMS) { 試す { リクエスト = 新しい ActiveXObject("Msxml2.XMLHTTP"); } キャッチ (otherMS) { 試す { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (失敗) { リクエスト = null; } } } 返品リクエスト; } ​ function sech(id) {//州と都市が変更されるとトリガーされ、onchange イベントを選択します ​ var aa = document.getElementById(id); if(id=="盛"){ GetCity(aa.value);//ここで aa.value は州の ID です } if(id=="し") { getCounty(aa.value);//ここで aa.value は都市の ID です } ​ } ​ function getProvince() {//すべての州を取得します リクエスト = createRequest(); if (リクエスト == null) { alert("リクエストを作成できません"); 戻る; } var url= "getDetails.php?ID=0";// ID=0 が PHP に渡されると、すべての州を取得します request.open("GET", url, true); request.onreadystatechange = displayProvince //コールバック関数を設定します。 request.send(null); //リクエストを送信します } ​ function getCity(id){// 州に対応する都市を取得します リクエスト = createRequest(); if (リクエスト == null) { alert("リクエストを作成できません"); 戻る; } var url= "getDetails.php?ID= + エスケープ(id); request.open("GET", url, true); request.onreadystatechange = ディスプレイシティ; request.send(null); } ​ function getCounty(id){//都市に対応する地区を取得します リクエスト = createRequest(); if (リクエスト == null) { alert("リクエストを作成できません"); 戻る; } var url= "getDetails.php?ID= + エスケープ(id); request.open("GET", url, true); request.onreadystatechange = 表示国; request.send(null); } ​ ​ function displayProvince() {//取得したデータを動的に追加して選択します if (request.readyState == 4) { If (request.status == 200) { var a=新しい配列; var b=request.responseText;//PHP から返されたデータを b に代入します a=b.split(",");//このデータを配列 a ～ "," に保存します document.getElementById("盛").length=1; var obj=document.getElementById("sheng'); for(i=0;i Obj.options.add(new Option(a[i],i+1)); //OPTION を動的に生成し、最初のパラメータは Text で、2 番目のパラメータは Value です。 ​ } } } ​ ​ function displayCity() {//取得したデータを動的に追加して選択します if (request.readyState == 4) { If (request.status == 200) { var a=新しい配列; var b=request.responseText; a=b.split(","); document.getElementById("shi").length=1;//再選択 document.getElementById("xian").length=1; //再選択 if(document.getElementById("盛").value!="県"){ var obj=document.getElementById('shi'); for(i=0;i obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)); //ocument.getElementById("sheng").value*100+i+ 1都市IDに対応します。 } ​​ } } } ​ function displayCounty() {//取得したデータを選択に追加します if (request.readyState == 4) { If (request.status == 200) { var a=新しい配列; var b=request.responseText; a=b.split(","); document.getElementById("xian").length=1; if(document.getElementById("盛").value!="県"&&document.getElementById("市").value!="都市"){ var obj=document.getElementById('xian'); for(i=0;i Obj.options.add(new Option(a[i],i+1001)); } ​​ } } } ​ getDetails.php コード: ​

header("Content-Type: text/html; charset=gb2312");
$conn = new COM("ADODB.Connection") または die("ADO を開始できません");
$connstr = "プロバイダー = SQLOLEDB;永続セキュリティ情報 = False;ユーザー ID = sa;パスワード = zzh;初期カタログ = NoteBook;データ ソース = localhost";

if($_REQUEST['ID']==0){ // 州のリストを取得します
$conn->Open($connstr); // データベース接続を確立します
$sqlstr = "select name from states" // クエリ文字列を設定します
$rs = $conn->; ;Execute( $sqlstr); // クエリを実行して結果を取得します
$num_cols = $rs->Fields->Count(); // データセット内の列数を取得します
$Province=array( );
$i=0;
while (!$rs->EOF) {
$Province[$i]=$rs->Fields['name']->Value.","; rs->MoveNext();
$ i++;
}
foreach($Province as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}



if($_REQUEST ['ID']>0&&$_REQUEST['ID']<35){//その州に対応する都市のリストを取得します
$conn->Open($ connstr); //データベース接続を確立します
$sqlstr = " select name from City where cid=".$_REQUEST['ID'] //クエリ文字列を設定します
$rs = $conn->Execute($sqlstr) ); //クエリを実行して結果を取得します
$num_cols = $rs ->Fields->Count(); //データセット内の列数を取得します
$City=array();
$i =0;
while (!$rs->EOF) {
$City[$i ]=$rs->Fields['name']->Value.","
$rs->MoveNext ();
$i++
}
foreach($City as $val)
echo $ val;
$conn->Close();
$rs = null;
$conn = null;
if($_REQUEST['ID']>100){//県と市の対応郡リストを取得します
$conn->Open($connstr) //データベース接続を確立します
$sqlstr = "select name from County where cid=".$_REQUEST['ID']; //クエリ文字列を設定します
$ rs = $conn->Execute($sqlstr); //クエリを実行して結果を取得します
$num_cols = $rs- >Fields->Count(); //データセット内の列数を取得します
$County=array() ;
$i=0;
while (!$rs->EOF) {
$County [$i]=$rs->フィールド['name']->Value.",";
$rs ->MoveNext();
}
foreach($County as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null
}
?>
​ ​

データベースデザイン、テーブル都道府県テーブル、市テーブル、郡テーブル。

要件: 省テーブルには ID と名前が必要です。ID は 1 ～ 34 であることが推奨されます。たとえば、北京の ID は 1、広東省の ID は 2 などです。 City テーブルには ID、名前、cid が必要です。id は cid*100+1 で、cid は都市の上位です。たとえば、cid が 2 の場合、cid は広東省になります。深センは201などです。 County テーブルには id、name、cid が必要です。これは 3 レベルの関係であるため、id は 10001 から任意に増やすことが推奨されます。たとえば、宝安区の cid は 201、龍崗区の cid も 201 です。 ​ ​

スクリーンショット: ​ HTML 効果: 完成した効果: ​ ​ 注: PHP はサーバー側です。Web サイトを公開した後、IP を介してデバッグすることをお勧めします。 http://www.bkjia.com/PHPjc/775949.htmlwww.bkjia.com

本当

http://www.bkjia.com/PHPjc/775949.html技術記事基本的な考え方は、JS で選択コントロールのオプションを動的に作成し、Ajax を介して PHP の SQL データベースから取得した州と市の情報を取得するというものです。 コードは少し長いですが、多くは似ています。 JS...

声明：

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

前の記事：PHP のヒント: JS および CSS 最適化ツール Minify_PHP チュートリアルの使用方法次の記事：PHP のヒント: JS および CSS 最適化ツール Minify_PHP チュートリアルの使用方法

関連記事

続きを見る

• cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法
• cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法
• cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法
• cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法
• 正規表現内のすべての式記号 (概要)

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）