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

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

index.html コード:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &lt ;html xmlns="http://www.w3.org/1999/xhtml"> PHP+Ajax で SQL データベースを取得

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'] $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.html www.bkjia.com 本当

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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