jquery创建一个ajax关键词数据搜索实现思路


Posted in Javascript onFebruary 26, 2013

 在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jQuery,MySQL 和 Ajax创建简单和有吸引力的 Ajax 搜索,这是继《使用jQuery打造一个实用的数据传输模态弹出窗体》第二篇jquery项目实际运用的教程,希望大家在开发项目的时候能够根据自己的实际情况灵活运用

点击搜索默认显示所有的结果

jquery创建一个ajax关键词数据搜索实现思路

输入A之后显示的搜索结果

jquery创建一个ajax关键词数据搜索实现思路

输入 p之后显示的搜索结果

jquery创建一个ajax关键词数据搜索实现思路

没有找到相关的搜索词页面

jquery创建一个ajax关键词数据搜索实现思路

演示 -点击下面的搜索按钮搜索数据

文件结构 主要用到几个文件  index.php首页 dbcon.php数据库连接文件 search.php搜索处理页面

jquery创建一个ajax关键词数据搜索实现思路

第一步创建一个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()用来循环输出结果,怎么样是不是很简单,如果你的项目有需要,可以直接使用这个代码
Javascript 相关文章推荐
浅谈JavaScript function函数种类
Dec 29 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 #Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 #Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 #Javascript
js 获取计算后的样式写法及注意事项
Feb 25 #Javascript
js调用webservice中的方法实现思路及代码
Feb 25 #Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 #Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 #Javascript
You might like
php中文字母数字验证码实现代码
2008/04/25 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php实现无限级分类
2014/12/24 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python map比for循环快在哪
2020/09/21 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
机修工工作职责
2014/02/21 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
倡议书范文大全
2015/04/28 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书