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 相关文章推荐
jQuery each()小议
Mar 18 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP小教程之实现链表
2014/06/09 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
数控专业自荐书范文
2014/03/16 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
运动会加油稿20字
2014/11/15 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python