jquery建立一個ajax關鍵詞資料搜尋實現思路

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

示範 -點擊下面的搜尋按鈕搜尋資料

在web開發過程當中，我們經常需要在前台頁面輸入關鍵詞進行資料的搜尋，我們通常使用的搜尋方式是將搜尋結果用另一個頁面顯示，這樣的方式對於搭建高效能網站來說不是最合適的，今天給大家分享一下如何使用 jQuery，MySQL 和 Ajax建立簡單和有吸引力的 Ajax 搜尋，這是繼《使用jQuery打造一個實用的資料轉送模態彈出表單》第二篇jquery項目實際運用的教程，希望大家在開發項目的時候能夠根據自己的實際情況靈活運用

點擊搜尋預設顯示所有的結果

輸入A之後顯示的搜尋結果

輸入 p之後顯示的搜尋結果

沒有找到相關的搜尋字詞頁面

示範 -點擊下面的搜尋按鈕搜尋資料

檔案結構主要用到幾個檔案 index.php首頁 dbcon.php資料庫連接檔案 search.php搜尋處理頁面

第一步建立一個ajax_search的資料庫，緊接著建立一個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--程式首頁面複製代碼代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax 教程:使用jquery和mysql建立一個ajax搜尋</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
</head>
<script language="javascript">
$(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());
});
});
</script>
<body>
<h1>Ajax 教程:使用jquery和mysql建立一個ajax搜尋</h1>
<div class="textBox">
<input type="text" value="" maxlength="100" name="searchBox" id="search">
<div class="searchBtn">

</div>
</div>
<br clear="all" />
<div id="content">
<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>
<div id="sub_cont">
</div>
</div>
</body>
</html>

DB Connect:dbcon.php--資料庫連接檔案複製代碼代碼如下:<?php
//資料庫連接函數
$link = mysql_connect('localhost', 'root', '你的密碼');
mysql_select_db('ajax_demo',$link);//選擇資料庫連接
?>

搜尋結果頁面search.php代碼如下複製代碼代碼如下:<?php
function checkValues($value)
{
// 使用此函數對所有這些值都要檢查防止 sql 注入和跨網站指令碼
//除去字串開頭和末尾的空格或其他字元
$value = trim($value);
// Stripslashes
if (get_magic_quotes_gpc()) {
//刪除由 addslashes() 函數添加的反斜線，該函數用於清理從資料庫或 HTML 表單中取回的資料。
$value = stripslashes($value);
}
//轉換所有的 <, >字元
$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));

// 剝去 HTML的標籤
$value = strip_tags($value);

// 引用值
$value = mysql_real_escape_string($value);
return $value;
}
include("dbcon.php");//載入資料庫連接檔案
$rec = checkValues($_REQUEST['val']);
//擷取table內容
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);//返回結果集中行的數目
?>

<?php
echo "<h2>搜尋結果</h2>";
echo "<table border='0' id='content' cellspacing='0' cellpadding='0'>
<tr bgcolor='#FFFFCC'>
<th>姓名</th>
<th>暱稱</th>
<th>年齡</th>
<th>住址</th>
<th>職業</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函數過濾字串防止sql注入和跨網站指令碼攻擊，mysql_query($sql);用來查詢語句，mysql_fetch_assoc（）用來迴圈輸出結果，怎麼樣是不是很簡單，如果你的項目有需要，可以直接使用這個代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More