PHP+ajaxで実現する県市連携機能
この記事では、主にPHP+独自のajaxで実装された州と市の連携機能を紹介し、ajax連携の原理と実装方法、およびPHPとajaxを組み合わせて州と市を実現するための関連操作スキルを詳細に分析します。リンクドロップダウンメニュー機能。必要な友達はそれを行うことができます。参考までに、詳細は次のとおりです:
Ajax のコアは JavaScript オブジェクト XmlHttpRequest です。このオブジェクトは Internet Explorer 5 で初めて導入され、非同期要求をサポートするテクノロジです。つまり、XmlHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。
XMLHttpRequest XMLHttpRequest オブジェクトはほとんどのブラウザーに実装されており、ユーザーの現在の操作を中断することなくクライアントからサーバーにデータを渡すことができるシンプルなインターフェイスを備えています。 XMLHttpRequest を使用して送信されるデータは、名前から XML 形式のデータを示唆していますが、任意の形式にすることができます。
開発者は、他の多くの XML 関連テクノロジーにすでに精通しているはずです。 XPath は XML ドキュメント内のデータにアクセスできますが、XML DOM を理解する必要があります。同様に、XSLT は、XML データから HTML または XML を生成する最も簡単かつ迅速な方法です。多くの開発者はすでに Xpath と XSLT に精通しているため、AJAX がデータ交換形式として XML を選択するのは理にかなっています。 XSLT はクライアント側とサーバー側の両方で使用でき、JavaScript で記述された大量のアプリケーション ロジックを削減できます。
Internet Explorerの場合:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0 xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP"); xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp_request = new XMLHttpRequest();
自動判定コード:
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
実際のアプリケーションでは、多くの異なるバージョンのブラウザーと互換性を持たせるために、XMLHttpRequest クラスを作成するメソッドは通常、次の形式で記述されます:
try { if (window.ActiveXObject) { for (var i = 5; i; i--) { try { if (i == 2) { xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0"); xmlhttp_request.setRequestHeader("Content-Type", "text/xml"); xmlhttp_request.setRequestHeader("Charset", "gb2312"); } break; } catch(e) { xmlhttp_request = false; } } } else if (window.XMLHttpRequest) { xmlhttp_request = new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) { xmlhttp_request.overrideMimeType('text/xml'); } } } catch(e) { xmlhttp_request = false; }
リクエストを送信 を呼び出すことができます。 HTTP リクエスト クラスの open() メソッドと send() メソッドは次のとおりです。
xmlhttp_request.open('GET',URL,true); xmlhttp_request.send(null);
は、HTTP リクエスト メソッド - GET、POST などのサーバーです。ご希望の通話方法をサポートします。 HTTP 仕様によれば、このパラメータは大文字にする必要があります。そうしないと、一部のブラウザ (Firefox など) がリクエストを処理できない可能性があります。 open()
2 番目のパラメータ
3 番目のパラメータ
は、リクエストが非同期モードであるかどうかを設定します。 TRUE の場合、JavaScript 関数はサーバーからの応答を待たずに実行を継続します。これは「AJAX」の「A」です。サーバー応答
これは、この応答を処理するためにどの JavaScript 関数を使用するかを HTTP 要求オブジェクトに伝える必要があります。次のように、オブジェクトの onreadystatechange 属性に、使用する JavaScript 関数の名前を設定できます。
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName は、JavaScript で作成した関数名です。 FunctionName( と記述しないように注意してください。 ) もちろん、onreadystatechange の後に JavaScript コードを直接作成することもできます。例:
xmlhttp_request.onreadystatechange = function(){ // JavaScript代码段 };
まずリクエストのステータスを確認します。完全なサーバー応答を受信した場合にのみ、関数は応答を処理できます。 XMLHttpRequest は、サーバーの応答を判断するための readState 属性を提供します。
の値は次のとおりです: 0 (初期化されていない) 1 (ロード中)
2 (ロード完了)3 (対話中)
4 (完了)
したがって、readyState の場合のみ=4 完全なサーバー応答を受信すると、関数はその応答を処理できます。具体的なコードは次のとおりです。
if (http_request.readyState == 4) { // 收到完整的服务器响应 }else { // 没有收到完整的服务器响应 }
readyState=4 の場合、完全なサーバー応答が受信されている場合、関数は HTTP サーバー応答のステータス値をチェックします。完全なステータス値は、W3C ドキュメントに記載されています。 HTTP サーバーの応答値が 200 の場合は、状態が正常であることを示します。
これらのデータを取得するには、2つの方法があります:
(1) サーバーの応答をテキスト文字列として返す(2) 応答をXMLDocumentオブジェクトとして返す
アプリケーションアーキテクチャ アプリケーション フレームワーク
<?php header("content-type:text/html;charset=utf-8"); ?> <html> <head> <title>事件</title> </head> <body> <form action="#" method="post"> 用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br /> 密码<input type="password" value="" name="upwd" id="upwd"/> <br /> <input type="submit" value="注册"/> <br /> </form> <script type="text/javascript"> function $(id){ return document.getElementById(id); } //全局对象 var http = null; var uname = $("uname"); uname.onblur = function(){ //1:创建对象 xmlhttprequest 对象 if(window.XMLHttpRequest){ // FF GOOLE IE 8 9 10 http = new XMLHttpRequest(); }else{ //IE 6 7 http = new ActiveXObject("Micrsoft.XMLHTTP"); } //2:准备url地址与参数 ?? bug var url = "demo51_do.php?uname="+$("uname").value; //3:定义处理返回结果方法 http.onreadystatechange = result; //4:发送请求 http.open('GET',url,true);//异步 http.send(null); }; //5:接收服务器返回结果 function result(){ //6:判断状态 接收完成 0 初始 1 发送 2处理 3 发送结果 //4:发送结果结束 //404 not found //200 ok 正确响就能 //7:判断状态 数据正确 if(http.readyState == 4 && http.status == 200){ //8:接收返回结果 {text/xml} var rs = http.responseText; //9:显示结果 var ms = ""; if(rs == 1){ ms = "己存在"; }else{ ms = "可以使用"; } $("msg").innerHTML = ms; } } </script> </body> </html>
demo51_do.php
<?php header("content-type:text/html;charset=utf-8"); $uname = $_GET['uname']; $link = mysql_connect("127.0.0.1","root",""); mysql_query("set names utf8"); mysql_select_db("test"); $sql = "select count(*) from t_user where name = '{$uname}'"; $rs = mysql_query($sql); if($row = mysql_fetch_array($rs)){ if($row[0] == 1){ echo "1";//己存在 }else{ echo "0";//不存在可以使用 } } mysql_free_result($rs); mysql_close($link); ?>
(小さな例 2)
<?php header("content-type:text/html;charset=utf-8"); ?> <html> <head> <title>事件</title> </head> <body> <form action="#" method="post"> 用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br /> 密码<input type="password" value="" name="upwd" id="upwd"/> <br /> <input type="submit" value="注册"/> <br /> </form> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var http = null; var uname = $("uname"); uname.onblur = function(){ //1:创建对象 xmlhttprequest 对象 if(window.XMLHttpRequest){ http = new XMLHttpRequest(); }else{ http = new ActiveXObject("Microsoft.XMLHTTP"); } //2:准备url地址与参数 var url = "demo6_do.php"; //3:定义处理返回结果方法 http.onreadystatechange = result; //4:发送请求 http.open('POST',url,true); http.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); http.send("uname="+$("uname").value); }; //5:接收服务器返回结果 function result(){ //6:判断状态 接收完成 //7:判断状态 数据正确 if(http.readyState == 4 && http.status == 200){ //8:接收返回结果 {text/xml} var rs = http.responseText; var ms = ""; if(rs == 1){ ms = "己存在"; }else{ ms = "可以使用"; } //9:显示结果 $("msg").innerHTML = ms; } } </script> </body> </html>
demo6_do.php
<?php header("content-type:text/html;charset=utf-8"); $uname = $_POST['uname']; $link = mysql_connect("127.0.0.1","root",""); mysql_query("set names utf8"); mysql_select_db("test"); $sql = "select count(*) from t_user where name = '{$uname}'"; $rs = mysql_query($sql); if($row = mysql_fetch_array($rs)){ if($row[0] == 1){ echo "1";//己存在 }else{ echo "0";//不存在可以使用 } } mysql_free_result($rs); mysql_close($link); ?>
(小さな例 3)----xml
<?php header("content-type:text/html;charset=utf-8"); ?> <html> <head> <title>事件</title> </head> <body> <form action="#"> 省 <select name="sel" id="sel"> <option value='0'>--请选择--</option> <option value='1'>--河北--</option> <option value='2'>--河南--</option> <option value='3'>--广东--</option> </select> 市 <select name="city" id="city"> <option value='0'>--请选择--</option> </select> </form> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var http = null; var sel = $("sel"); sel.onchange = function(){ //1:创建对象 xmlhttprequest 对象 if(window.XMLHttpRequest){ http = new XMLHttpRequest(); }else{ http = new ActiveXObject("Microsoft.XMLHTTP"); } //2:准备url地址与参数 var url = "demo7_do.php?shen="+$("sel").value; //3:定义处理返回结果方法 http.onreadystatechange = result; //4:发送请求 http.open('GET',url,true); http.send(null); }; //5:接收服务器返回结果 function result(){ //6:判断状态 接收完成 //7:判断状态 数据正确 if(http.readyState == 4 && http.status == 200){ //8:接收返回结果 {text/xml} var rs = http.responseXML; var citys = rs.getElementsByTagName("city"); for(var i = 0;i < citys.length;i++){ var o = document.createElement("option"); o.value = ""+(i+1); o.text = citys[i].firstChild.data; $("city").add(o,null); } //9:显示结果 } } </script> </body> </html>
demo7_do.php
<?php header("content-type:text/xml;charset=utf-8"); $shen = $_GET['shen']; if($shen == "1"){ $city = "<root><city>石家庄</city><city>保定</city><city>沧州</city></root>"; }else if($shen == "2"){ $city = "<root><city>郑州</city><city>新乡</city><city>登封</city></root>"; }else if($shen == "3"){ $city = "<root><city>东莞</city><city>中山</city><city>广州</city></root>"; } echo $city; ?>
関連する推奨事項:
Ajax PHP 更新なしのセカンダリリンクドロップダウンメニュー (
都道府県と都市のリンク) ソースコード_PHP チュートリアル Ajaxで書いた県市連携、住所変更時に既存の県市を表示する方法
以上がPHP+ajaxで実現する県市連携機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。

Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、

あなたが経験豊富な PHP 開発者であれば、すでにそこにいて、すでにそれを行っていると感じているかもしれません。あなたは、運用を達成するために、かなりの数のアプリケーションを開発し、数百万行のコードをデバッグし、大量のスクリプトを微調整してきました。

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML(拡張可能なマークアップ言語)は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。

文字列は、文字、数字、シンボルを含む一連の文字です。このチュートリアルでは、さまざまな方法を使用してPHPの特定の文字列内の母音の数を計算する方法を学びます。英語の母音は、a、e、i、o、u、そしてそれらは大文字または小文字である可能性があります。 母音とは何ですか? 母音は、特定の発音を表すアルファベットのある文字です。大文字と小文字など、英語には5つの母音があります。 a、e、i、o、u 例1 入力:string = "tutorialspoint" 出力:6 説明する 文字列「TutorialSpoint」の母音は、u、o、i、a、o、iです。合計で6元があります

静的結合(静的::) PHPで後期静的結合(LSB)を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1)解析プロセスは実行時に実行されます。2)継承関係のコールクラスを検索します。3)パフォーマンスオーバーヘッドをもたらす可能性があります。

PHPの魔法の方法は何ですか? PHPの魔法の方法には次のものが含まれます。1。\ _ \ _コンストラクト、オブジェクトの初期化に使用されます。 2。\ _ \ _リソースのクリーンアップに使用される破壊。 3。\ _ \ _呼び出し、存在しないメソッド呼び出しを処理します。 4。\ _ \ _ get、dynamic属性アクセスを実装します。 5。\ _ \ _セット、動的属性設定を実装します。これらの方法は、特定の状況で自動的に呼び出され、コードの柔軟性と効率を向上させます。
