PHP と AJAX ライブ検索

WBOY
リリース: 2016-06-23 14:34:37
オリジナル
938 人が閲覧しました

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」プレースホルダーに送信される出力です
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート