在web開發(fā)過程當中，我們經(jīng)常需要在前臺頁面輸入關鍵詞進行數(shù)據(jù)的搜索，我們通常使用的搜索方式是將搜索結果用另一個頁面顯示，這樣的方式對于搭建高性能網(wǎng)站來說不是最合適的，今天給大家分享一下如何使用 jquery，MySQL 和 Ajax創(chuàng)建簡單和有吸引力的 Ajax 搜索，這是繼《使用jQuery打造一個實用的數(shù)據(jù)傳輸模態(tài)彈出窗體》第二篇jquery項目實際運用的教程，希望大家在開發(fā)項目的時候能夠根據(jù)自己的實際情況靈活運用

點擊搜索默認顯示所有的結果

輸入A之后顯示的搜索結果

輸入 p之后顯示的搜索結果

沒有找到相關的搜索詞頁面

演示 -點擊下面的搜索按鈕搜索數(shù)據(jù)

文件結構 主要用到幾個文件? index.php首頁 dbcon.php數(shù)據(jù)庫連接文件 search.php搜索處理頁面

第一步創(chuàng)建一個ajax_search的數(shù)據(jù)庫，緊接著創(chuàng)建一個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 ;

HTML? ：index.php--程序主頁面

復制代碼 代碼如下:

Ajax 教程:使用jquery和mysql創(chuàng)建一個ajax搜索

$(document).ready(function(){

//顯示加載條

function showLoader(){

$('.search-background').fadeIn(200);

}

//隱藏加載條

function hideLoader(){

$('#sub_cont').fadeIn(1500);

$('.search-background').fadeOut(200);

};

$('#search').keyup(function(e) {

if(e.keyCode == 13) {

showLoader();

$('#sub_cont').fadeIn(1500);

$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());

}

});

$(".searchBtn").click(function(){

//顯示進度

showLoader();

$('#sub_cont').fadeIn(1500);

$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());

});

});

Ajax 教程:使用jquery和mysql創(chuàng)建一個ajax搜索

DB Connect:dbcon.php--數(shù)據(jù)庫連接文件

復制代碼 代碼如下:

//數(shù)據(jù)庫連接函數(shù)

$link = mysql_connect('localhost', 'root', '你的密碼');

mysql_select_db('ajax_demo',$link);//選擇數(shù)據(jù)庫連接

?>

搜索結果頁面search.php代碼如下

復制代碼 代碼如下:

function checkValues($value)

{

// 使用此函數(shù)對所有這些值都要檢查防止 sql 注入和跨站點腳本

//除去字符串開頭和末尾的空格或其他字符

$value = trim($value);

// Stripslashes

if (get_magic_quotes_gpc()) {

//刪除由 addslashes() 函數(shù)添加的反斜杠，該函數(shù)用于清理從數(shù)據(jù)庫或 HTML 表單中取回的數(shù)據(jù)。

$value = stripslashes($value);

}

//轉換所有的 字符

$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));

// 剝?nèi)?HTML的標簽

$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);//返回結果集中行的數(shù)目

?>

echo "

搜索結果

";

echo "

姓名昵稱年齡住址職業(yè)

while ($row = mysql_fetch_assoc($rsd))

{

echo "

";

echo "

" . $row['FirstName'] . "";

echo "

" . $row['LastName'] . "";

echo "

" . $row['Age'] . "";

echo "

" . $row['Hometown'] . "";

echo "

" . $row['Job'] . "";

echo "

";

}

echo "

";

if($total==0){ echo '

No Record Found !';}?>

checkValues函數(shù)過濾字符串防止sql注入和跨站點腳本攻擊，mysql_query($sql);用來查詢語句，mysql_fetch_assoc()用來循環(huán)輸出結果，怎么樣是不是很簡單，如果你的項目有需要，可以直接使用這個代碼

總結

以上是生活随笔為你收集整理的ajax搜索思路,jquery创建一个ajax关键词数据搜索实现思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。