Carian masa nyata AJAX

AJAX menyediakan pengguna dengan pengalaman carian yang lebih mesra dan lebih interaktif.

Carian Langsung AJAX

Dalam contoh di bawah, kami akan menunjukkan carian masa nyata yang boleh diperoleh semasa anda menaip Carian data keputusan.

Berbanding dengan carian tradisional, carian masa nyata mempunyai banyak kelebihan:

1 Apabila memasukkan data, hasil yang sepadan akan dipaparkan

2. tapis keputusan

3 Jika terdapat terlalu sedikit hasil, padamkan aksara untuk mendapatkan julat yang lebih luas

Masukkan "HTML" dalam kotak teks di bawah untuk mencari Halaman HTML:

<. 🎜>

Hasil dalam contoh di atas ditemui dalam fail XML (links.xml). Untuk memastikan contoh ini kecil dan mudah, kami hanya menyediakan 6 hasil.

Penjelasan contoh - halaman HTML

Apabila pengguna menaip aksara dalam kotak input di atas, fungsi "showResult()" akan menjadi 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:

1 Cipta objek XMLHttpRequest

2 apabila respons pelayan sedia

3 Hantar permintaan ke fail pada pelayan

4 Sila ambil perhatian parameter (q) yang ditambahkan pada hujung URL (mengandungi kandungan kotak input)

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 ) > 0), apa yang akan berlaku:

1) Muatkan fail XML ke dalam objek XML DOM baharu

2) Lintas semua elemen <tajuk> >

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

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

Meneruskan pembelajaran

fail baharu

<?php // 需要与前面的HTML文件联合使用 $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; ?>

serahkan Tetapkan Semula Kod

Operasi automatik

Carian masa nyata AJAX

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]