masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Carian masa nyata AJAX

Contoh PHP - carian masa nyata AJAX


Penjelasan contoh - halaman HTML

Apabila pengguna berada dalam Apabila aksara ditaip dalam kotak input di atas, fungsi "showResult()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onkeyup": 

<html>
 <head>
     <script>
         function showResult(str)
         {
             if (str.length==0)
             {
                 document.getElementById("livesearch").innerHTML="";
                 document.getElementById("livesearch").style.border="0px";
                 return;
             }
             if (window.XMLHttpRequest)
             {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
                 xmlhttp=new XMLHttpRequest();
             }
             else
             {// IE6, IE5 浏览器执行
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
             xmlhttp.onreadystatechange=function()
             {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                     document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                     document.getElementById("livesearch").style.border="1px solid #A5ACB2";
                 }
             }
             xmlhttp.open("GET","livesearch.php?q="+str,true);
             xmlhttp.send();
         }
     </script>
 </head>
 <body>
 <form>
     <input type="text" size="30" onkeyup="showResult(this.value)">
     <div id="livesearch"></div>
 </form>
 </body>
 </html>

Penjelasan kod sumber:

Jika kotak input kosong (str.length==0), ini fungsi akan Kosongkan kandungan ruang letak carian langsung dan keluar dari fungsi tersebut.

Jika kotak input tidak kosong, showResult() akan melaksanakan langkah berikut:

·  Buat objek XMLHttpRequest

·  Buat fungsi untuk dilaksanakan apabila respons pelayan sedia

·   Hantar permintaan kepada fail pada pelayan

·   Sila beri perhatian kepada parameter (q) yang ditambahkan pada hujung URL (mengandungi kandungan input box)


Fail PHP

Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "livesearch.php".

Kod sumber dalam "livesearch.php" mencari fail XML untuk tajuk yang sepadan dengan rentetan carian dan mengembalikan hasil: 

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
 
$x=$xmlDoc->getElementsByTagName('link');
 
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
 
// 如果 q 参数存在则从 xml 文件中查找数据
if (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)
               {
                       // 找到匹配搜索的链接
                       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>";
                               }
                       }
               }
        }
}
 
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
        $response="no suggestion";
}
else
{
        $response=$hint;
}
 
// 输出结果
echo $response;
?>

Jika JavaScript menghantar sebarang teks (iaitu strlen($q : 🎜>

· Tetapkan URL dan tajuk yang betul dalam pembolehubah "$response". Jika lebih daripada satu padanan ditemui, semua padanan ditambahkan pada pembolehubah.

· Jika tiada padanan ditemui, tetapkan pembolehubah $response kepada "tiada cadangan".

Meneruskan pembelajaran
||
<html> <head> <script> function showResult(str) { if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 浏览器执行 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("livesearch").innerHTML=xmlhttp.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492836 permainan