ホームページ >バックエンド開発 >PHPチュートリアル >ユーザー名/メールアドレスなどが既に存在するかどうかの Ajax リアルタイム検証 コードのパッケージ化_PHP チュートリアル
ユーザー名/メールアドレスなどが既に存在するかどうかの Ajax リアルタイム検証 コードのパッケージ化_PHP チュートリアル
- WBOYオリジナル
- 2016-07-21 15:22:321152ブラウズ
今回は「Ajax技術を利用してユーザー名が存在するかどうかを検出する」例を紹介します。
Ajax テクノロジーを使用してユーザー名が存在するかどうかを検出する原理フローチャート: 
最終結果のスクリーンショット:
コードをコピーします コードは次のとおりです:
この関数のコアコードは ajax.js にあり、これは別途導入する必要があります
②後で入力ボックスの値を取得するために JS を使用する必要があるため、フォームに名前を付けます
③入力ボックスに「onblur」イベントを追加します、つまり、「フォーカス」が失われたときにこのイベントがトリガーされます (つまり、フローチャートの「トリガー コントロール」)
④ は送信されたデータを保存するために使用されます。サーバーから戻ります (つまり、「ユーザー名はすでに存在します」など)
コードをコピー
コードは次のとおりです:
mysql_connect("localhost",'root',' '); mysql_select_db('test'); $sql="select * from ajax where name='$_GET[id]'";
if(is_array(mysql_fetch_array) query))){ echo "ユーザー名はすでに存在します< /font>";
}else{
echo "ユーザー名はを使用できます"; }
?>
コードの説明:
ajax open メソッドを通じて、ユーザーは「ユーザー名」を入力し、それを ID (つまり、$_GET[id]) を介して渡します。 「ユーザー名」が存在するかどうかを確認するためにクエリが実行されます
ajax.js
コードをコピーします
}else{
echo "ユーザー名はを使用できます"; }
?>
コードの説明:
ajax open メソッドを通じて、ユーザーは「ユーザー名」を入力し、それを ID (つまり、$_GET[id]) を介して渡します。 「ユーザー名」が存在するかどうかを確認するためにクエリが実行されます
ajax.js
コードをコピーします
コードは次のとおりです:
// JavaScript Document
var XHR // グローバル オブジェクトを定義しますfunction createXHR(); { //まず、XMLHttpRequest オブジェクトを作成する必要がありますif(window.ActiveXObject){//IE の下位バージョン シリーズ XHR=new ActiveXObject('Microsoft. 。 。しかし、IE6 以降では状況が変わり始めました }else if(window.XMLHttpRequest){//IE7 IE8 を含むブラウザ"GET","checkname.php?id="+username,true);//true: send() メソッドが結果を返すのを待たずに非同期送信を示します。これは、ajax の核となる考え方です
byhongfei(){ if(XHR.readyState == 4){//Ajax エンジン オブジェクトのメソッドとプロパティについては、私の他のブログ投稿を参照してください: http://www.cnblogs.com/hongfei/archive/ 2011/11 /29/2265377.html
if(XHR.status == 200){
var textHTML=XHR.responseText;
document.getElementById('checkbox').innerHTML=textHTML
}
}
}
コードの説明:
①まず、ajax エンジン オブジェクトを宣言する必要があります。市場シェアはそれぞれほぼ半分であるため、IE-->ActiveXObject; その他-->XMLHttpRequest の両方の側面を考慮する必要があります。彼女を関数 createXHR にカプセル化しました。
③index.html で指定した checkname() 関数は、「フォーカス」が失われたときにトリガーされます。では、ユーザーが入力した「ユーザー名」をどのように取得するのでしょうか?ここでは、js を使用して document.myform.user.value を簡単にキャプチャできます (フォームと入力に名前を付けた理由がわかりました。このステップは、フローチャートの「入力されたコンテンツを取得する」に相当します)。興味のあるブロガーは、それを試してみてください。 createXHR() の前の行にあるコード (alert(username)) を編集し、キャプチャされたユーザー名をポップアップ表示してみてください。
④Ajax エンジンにはいくつかのメソッドと属性があります (私の他のブログ投稿を参照してください: 図を見て理解してください: 通常の対話モードと Ajax 対話モードの違い) それを使用する前に、まず関数 craateXHR を呼び出す必要があります。 ajax オブジェクトを作成します
⑤ajax オブジェクトでは、open()、onreadystatechange、send() の 3 つのメソッドが必須です。
リクエストをサーバーに送信するには、open() メソッドと send() メソッドを使用します。
open() メソッドの最初のパラメータは、送信に GET または POST を使用することを示します。 。 。 。 。 。
open() メソッドの 2 番目のパラメータは、リクエストされる URL アドレスを示します (ここでは checkname.php ファイルをリクエストしています)。 open() メソッドの 3 番目のパラメータである async は、絶対アドレスまたは相対アドレスにすることができます。は非同期リクエストを使用するかどうかを示し、true は非同期リクエストを使用することを意味します。この場合、ajax と js によるサーバーの応答を待つ必要はありません。代わりに、①サーバーの応答を待ちながら他のスクリプトを実行します。②応答が返ってきたら処理します。準備ができて。一般に、一部の小さなリクエストでは、async=false も許容されますが、この時点では onreadystatechange 関数を記述しないでください。
onreadystatechange イベント: このイベントは、ajax 属性の readState が変更されるとトリガーされます。このイベントでは、サーバーの応答を処理する準備ができたとき (つまり、readyState=4 および status=200 のとき)、サーバーに実行させるタスクを指定します。ここでは、データベースから取得される結果が次のようになるよう指定します。 id「checkbox」のspanタグ内に出力します。
⑥checkname.php を通じてデータベースにクエリを実行すると、クエリ結果 (つまり、フローチャートの「クエリ データベース」に相当するサーバーの応答) が取得されます。この時点では、データはまだ ajax エンジン内にあります。サーバーから応答を取得する必要があります。XMLHttpRequest オブジェクトの responseText または responseXML 属性を使用し、サーバー応答から返されたデータを、DOM 属性を介して id="checkbox" を持つ spam タグの値に設定する必要があります。 innerHTML 注: ajax を使用してメールボックスが存在するかどうかを監視するのには理由があります。この時点で、onblur イベントを onfocus に変更する必要があります。イベント。
オリジナルの cnblogs Xiaofei
ソース コード パッケージのダウンロード /201112/yuanma/checkname_php.rar
http://www.bkjia.com/PHPjc/324720.html
if(XHR.status == 200){
var textHTML=XHR.responseText;
document.getElementById('checkbox').innerHTML=textHTML
}
}
}
コードの説明:
①まず、ajax エンジン オブジェクトを宣言する必要があります。市場シェアはそれぞれほぼ半分であるため、IE-->ActiveXObject; その他-->XMLHttpRequest の両方の側面を考慮する必要があります。彼女を関数 createXHR にカプセル化しました。
③index.html で指定した checkname() 関数は、「フォーカス」が失われたときにトリガーされます。では、ユーザーが入力した「ユーザー名」をどのように取得するのでしょうか?ここでは、js を使用して document.myform.user.value を簡単にキャプチャできます (フォームと入力に名前を付けた理由がわかりました。このステップは、フローチャートの「入力されたコンテンツを取得する」に相当します)。興味のあるブロガーは、それを試してみてください。 createXHR() の前の行にあるコード (alert(username)) を編集し、キャプチャされたユーザー名をポップアップ表示してみてください。
④Ajax エンジンにはいくつかのメソッドと属性があります (私の他のブログ投稿を参照してください: 図を見て理解してください: 通常の対話モードと Ajax 対話モードの違い) それを使用する前に、まず関数 craateXHR を呼び出す必要があります。 ajax オブジェクトを作成します
⑤ajax オブジェクトでは、open()、onreadystatechange、send() の 3 つのメソッドが必須です。
リクエストをサーバーに送信するには、open() メソッドと send() メソッドを使用します。
open() メソッドの最初のパラメータは、送信に GET または POST を使用することを示します。 。 。 。 。 。
open() メソッドの 2 番目のパラメータは、リクエストされる URL アドレスを示します (ここでは checkname.php ファイルをリクエストしています)。 open() メソッドの 3 番目のパラメータである async は、絶対アドレスまたは相対アドレスにすることができます。は非同期リクエストを使用するかどうかを示し、true は非同期リクエストを使用することを意味します。この場合、ajax と js によるサーバーの応答を待つ必要はありません。代わりに、①サーバーの応答を待ちながら他のスクリプトを実行します。②応答が返ってきたら処理します。準備ができて。一般に、一部の小さなリクエストでは、async=false も許容されますが、この時点では onreadystatechange 関数を記述しないでください。
onreadystatechange イベント: このイベントは、ajax 属性の readState が変更されるとトリガーされます。このイベントでは、サーバーの応答を処理する準備ができたとき (つまり、readyState=4 および status=200 のとき)、サーバーに実行させるタスクを指定します。ここでは、データベースから取得される結果が次のようになるよう指定します。 id「checkbox」のspanタグ内に出力します。
⑥checkname.php を通じてデータベースにクエリを実行すると、クエリ結果 (つまり、フローチャートの「クエリ データベース」に相当するサーバーの応答) が取得されます。この時点では、データはまだ ajax エンジン内にあります。サーバーから応答を取得する必要があります。XMLHttpRequest オブジェクトの responseText または responseXML 属性を使用し、サーバー応答から返されたデータを、DOM 属性を介して id="checkbox" を持つ spam タグの値に設定する必要があります。 innerHTML 注: ajax を使用してメールボックスが存在するかどうかを監視するのには理由があります。この時点で、onblur イベントを onfocus に変更する必要があります。イベント。
オリジナルの cnblogs Xiaofei
ソース コード パッケージのダウンロード /201112/yuanma/checkname_php.rar
http://www.bkjia.com/PHPjc/324720.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。