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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jquery图形密码实现方法
Mar 11 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
js实现select下拉框菜单
Dec 08 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
用Golang运行JavaScript的实现示例
Nov 25 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP调用三种数据库的方法(1)
2006/10/09 PHP
php一些公用函数的集合
2008/03/27 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
requirejs + vue 项目搭建详解
2017/06/16 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
es6中比较有用的7个技巧小结
2019/07/12 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
pandas DataFrame数据转为list的方法
2018/04/11 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
大学生学习新党章思想汇报
2014/10/25 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
交通事故责任认定书
2015/08/06 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书