在web開發(fā)過程當(dāng)中，我們經(jīng)常需要在前臺(tái)頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索，我們通常使用的搜索方式是將搜索結(jié)果用另一個(gè)頁面顯示，這樣的方式對(duì)于搭建高性能網(wǎng)站來說不是最合適的，今天給大家分享一下如何使用 jQuery，MySQL 和 Ajax創(chuàng)建簡單和有吸引力的Ajax 搜索，希望大家在開發(fā)項(xiàng)目的時(shí)候能夠根據(jù)自己的實(shí)際情況靈活運(yùn)用。
點(diǎn)擊搜索默認(rèn)顯示所有的結(jié)果
輸入A之后顯示的搜索結(jié)果
輸入 p之后顯示的搜索結(jié)果
沒有找到相關(guān)的搜索詞頁面
演示 -點(diǎn)擊下面的搜索按鈕搜索數(shù)據(jù)
文件結(jié)構(gòu) 主要用到幾個(gè)文件 index.php首頁 dbcon.php數(shù)據(jù)庫連接文件 search.php搜索處理頁面
第一步創(chuàng)建一個(gè)ajax_search的數(shù)據(jù)庫，緊接著創(chuàng)建一個(gè)ajax_search表
CREATE TABLE `ajax_search` (
`id` int(11) NOT NULL auto_increment,
`FirstName` varchar(50) NOT NULL,
`LastName` varchar(50) NOT NULL,
`Age` int(11) NOT NULL,
`Hometown` varchar(50) NOT NULL,
`Job` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
DB Connect:dbcon.php--數(shù)據(jù)庫連接文件
<?php
//數(shù)據(jù)庫連接函數(shù)
$link = mysql_connect('localhost', 'root', '你的密碼');
mysql_select_db('ajax_demo',$link);//選擇數(shù)據(jù)庫連接
?>搜索結(jié)果頁面search.php代碼如下
<?php
function checkValues($value)
{
// 使用此函數(shù)對(duì)所有這些值都要檢查防止 sql 注入和跨站點(diǎn)腳本
//除去字符串開頭和末尾的空格或其他字符
$value = trim($value);
// Stripslashes
if (get_magic_quotes_gpc()) {
//刪除由 addslashes() 函數(shù)添加的反斜杠，該函數(shù)用于清理從數(shù)據(jù)庫或 HTML 表單中取回的數(shù)據(jù)。
$value = stripslashes($value);
}
//轉(zhuǎn)換所有的 <, >字符
$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));
// 剝?nèi)?nbsp;HTML的標(biāo)簽
$value = strip_tags($value);
// 引用值
$value = mysql_real_escape_string($value);
return $value;
}
include("dbcon.php");//加載數(shù)據(jù)庫連接文件
$rec = checkValues($_REQUEST['val']);
//獲取table內(nèi)容
if($rec)
{
$sql = "select * from ajax_search where FirstName like '%$rec%' or LastName like '%$rec%' or Age like '%$rec%' or Hometown like '%$rec%'";
}
else
{
$sql = "select * from ajax_search";
}
$rsd = mysql_query($sql);//查詢這條語句
$total = mysql_num_rows($rsd);//返回結(jié)果集中行的數(shù)目
?>
<!--循環(huán)輸出結(jié)果-->
<?php
echo "<h2>搜索結(jié)果</h2>";
echo "<table border='0' id='content' cellspacing='0' cellpadding='0'>
<tr bgcolor='#FFFFCC'>
<th>姓名</th>
<th>昵稱</th>
<th>年齡</th>
<th>住址</th>
<th>職業(yè)</th>
</tr>";
while ($row = mysql_fetch_assoc($rsd))
{
echo "<tr class='each_rec'>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}?>checkValues函數(shù)過濾字符串防止sql注入和跨站點(diǎn)腳本攻擊，mysql_query($sql);用來查詢語句，mysql_fetch_assoc（）用來循環(huán)輸出結(jié)果，怎么樣是不是很簡單，如果你的項(xiàng)目有需要，可以直接使用這個(gè)代碼。
喜歡 
頂
難過
囧
圍觀
無聊
