PHP と AJAX ライブ検索-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

PHP と AJAX ライブ検索

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 23, 2016 pm 02:34 PM

AJAX は、よりフレンドリーでインタラクティブな検索エクスペリエンスをユーザーに提供します。

AJAX ライブ検索

以下の AJAX の例では、ライブ検索を示します。

リアルタイム検索には、従来の検索に比べて多くの利点があります。

データを入力すると、一致する結果が表示され、結果が少なすぎる場合は、結果がフィルタされます。の範囲が広い

下のテキストボックスで W3School ページを検索します

この例には 4 つの要素が含まれています:

単純な HTML フォーム JavaScript PHP ページ XML ドキュメント

この例では、結果は XML ドキュメント (links.xml) にあります。。この例を小さくシンプルにするために、8 つの結果のみを提供します。

HTML フォーム

これは HTML ページです。これには、単純な HTML フォーム、このフォームの CSS スタイル、および JavaScript へのリンクが含まれています:

<html><head><script src="livesearch.js"></script> <style type="text/css"> #livesearch  {   margin:0px;  width:194px;   }#txt1  {   margin:0px;  } </style></head><body><form><input type="text" id="txt1" size="30"onkeyup="showResult(this.value)"><div id="livesearch"></div></form></body></html>

ログイン後にコピー

例の説明 - HTML フォーム

ご覧のとおり、HTML ページには、「txt1」という名前のテキストボックスを持つ単純な HTML フォームが含まれています。

フォームの仕組みは次のとおりです:

ユーザーがテキストボックスでキーを押してキーを放すと、イベントがトリガーされ、フォームの下で showResult() という名前の関数が実行されます。 < 名前は "livesearch" ;div> 要素です。 showResult() によって返されるデータのプレースホルダーとして使用されます

JavaScript

JavaScript コードは、HTML ドキュメントに接続された「livesearch.js」に保存されます:

var xmlHttpfunction showResult(str){if (str.length==0) {  document.getElementById("livesearch"). innerHTML=""; document.getElementById("livesearch"). style.border="0px"; return }xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var url="livesearch.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)} function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("livesearch"). innerHTML=xmlHttp.responseText; document.getElementById("livesearch"). style.border="1px solid #A5ACB2"; } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

ログイン後にコピー

例の説明:

GetXmlHttpObject は PHP の例と同じですおよび AJAX リクエスト。

showResult()関数

この関数はテキストボックスに文字が入力されるたびに実行されます。

テキストフィールドに入力がない場合 (str.length == 0)、この関数は戻りフィールドを空に設定し、周囲の境界線を削除します。

ただし、テキストフィールドに入力がある場合、関数が実行されます:

サーバーに送信する URL (ファイル名) を定義します入力ボックスの内容を含むパラメータ (q) を URL に追加します乱数を追加しますサーバーがキャッシュを使用できないようにするファイルは GetXmlHttpObject 関数を呼び出して XMLHTTP オブジェクトを作成し、変更がトリガーされたときにこの関数に stateChanged という関数を実行するように指示します。指定された URL を使用して XMLHTTP オブジェクトを開きます。 . stateChanged() 関数

XMLHTTP オブジェクトの状態が変化したときにこの関数が実行されます。

ステータスが 4 (または「完了」) に変化すると、txtHint プレースホルダーの内容が応答テキストで埋められ、戻りフィールドの周囲に境界線が設定されます。

PHP ページ

JavaScript コードによって呼び出されるサーバーページは、「livesearch.php」という名前の PHP ファイルです。

「livesearch.php」のコードは、XML ドキュメント「links.xml」をチェックします。この文書の w3school.com.cn 上の一部のページのタイトルと URL。

これらのコードは、XML ファイル内で検索文字列に一致するタイトルを検索し、結果を HTML で返します:

<?php$xmlDoc = new DOMDocument();$xmlDoc->load("links.xml");$x=$xmlDoc->getElementsByTagName('link');//get the q parameter from URL$q=$_GET["q"];//lookup all links from the xml file if length of q>0if (strlen($q) > 0){$hint="";for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1)  {  //find a link matching the search text  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))   {   if ($hint=="")    {    $hint="<a href='" .     $z->item(0)->childNodes->item(0)->nodeValue .     "' target='_blank'>" .     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";    }   else    {    $hint=$hint . "<br /><a href='" .     $z->item(0)->childNodes->item(0)->nodeValue .     "' target='_blank'>" .     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";    }   }  } }}// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == "") { $response="no suggestion"; }else { $response=$hint; } //output the responseecho $response;?>

ログイン後にコピー

説明例:

JavaScript からテキストが送信された場合 (strlen($q) > 0)、何が起こりますか? :

PHP は、「links.xml」ファイルの XML DOM オブジェクトを作成します。すべての「title」要素 (nodetypes = 1) を反復処理して、正しいタイトルを含むリンクを見つけて設定します。それを「$response」変数に追加します。複数の一致が見つかった場合、すべての一致が変数に追加されます。一致が見つからなかった場合、$response 変数は「提案なし」に設定されます。$result は、「livesearch」プレースホルダーに送信される出力です

このウェブサイトの声明

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

ホット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）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1209

Related knowledge

11ベストPHP URLショートナースクリプト（無料およびプレミアム） Mar 03, 2025 am 10:49 AM

多くの場合、キーワードと追跡パラメーターで散らかった長いURLは、訪問者を阻止できます。 URL短縮スクリプトはソリューションを提供し、ソーシャルメディアやその他のプラットフォームに最適な簡潔なリンクを作成します。これらのスクリプトは、個々のWebサイトにとって価値があります

Laravelでフラッシュセッションデータを使用します Mar 12, 2025 pm 05:08 PM

Laravelは、直感的なフラッシュメソッドを使用して、一時的なセッションデータの処理を簡素化します。これは、アプリケーション内に簡単なメッセージ、アラート、または通知を表示するのに最適です。データは、デフォルトで次の要求のためにのみ持続します。 $リクエスト -

LaravelのバックエンドでReactアプリを構築する：パート2、React Mar 04, 2025 am 09:33 AM

これは、LaravelバックエンドとのReactアプリケーションの構築に関するシリーズの2番目と最終部分です。シリーズの最初の部分では、基本的な製品上場アプリケーションのためにLaravelを使用してRESTFUL APIを作成しました。このチュートリアルでは、開発者になります

Laravelテストでの簡略化されたHTTP応答のモッキング Mar 12, 2025 pm 05:09 PM

Laravelは簡潔なHTTP応答シミュレーション構文を提供し、HTTP相互作用テストを簡素化します。このアプローチは、テストシミュレーションをより直感的にしながら、コード冗長性を大幅に削減します。基本的な実装は、さまざまな応答タイプのショートカットを提供します。 Illuminate \ support \ facades \ httpを使用します。 http :: fake（[[ 'google.com' => 'hello world'、 'github.com' => ['foo' => 'bar']、 'forge.laravel.com' =>