在web开发过程当中，我们经常需要在前台页面输入关键词进行数据的搜索，我们通常使用的搜索方式是将搜索结果用另一个页面显示，这样的方式对于搭建高性能网站来说不是最合适的，今天给大家分享一下如何使用 jQuery，MySQL 和 Ajax创建简单和有吸引力的 Ajax 搜索，希望大家在开发项目的时候能够根据自己的实际情况灵活运用。
点击搜索默认显示所有的结果

[attachimg]10**[/attachimg]

输入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--程序主页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax 教程:使用jquery和mysql创建一个ajax搜索</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
</head>
<script language="javascript">
$(document).ready(function(){
//显示加载条
function showLoader(){
}
//隐藏加载条
function hideLoader(){
$('#sub_cont').fadeIn(1500);
};
$('#search').keyup(function(e) {
if(e.keyCode == 13) {
showLoader();
$('#sub_cont').fadeIn(1500);
$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());
}
});
//显示进度
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>[/code]
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（）用来循环输出结果，怎么样是不是很简单，如果你的项目有需要，可以直接使用这个代码

转自零零H5原文地址：http://www.00h5.com/thread-2186-1-1.html

jQuery创建ajax关键词数据搜索的更多相关文章

  1. jquery通过ajax获取数据，控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  2. jQuery的Ajax请求数据时type无法使用GET

    写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...

  3. jQuery——通过Ajax发送数据

    Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML),一个Ajax解决方案涉及如下技术: JavaScript:处理与用户及其他浏览器相关事件的 ...

  4. Jquery 等待ajax返回数据loading控件ShowLoading组件

    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...

  5. jquery 之ajax获取数据

    $.ajax({    url: "http://www.hzhuti.com",    //请求的url地址    dataType: "json",   / ...

  6. jquery通过ajax查询数据动态添加到select

    function addSelectData() { //select的id为selectId //清空select中的数据 $("#selectId").empty(); $.a ...

  7. jquery输出ajax返回数据中的时间戳转化为日期时间的函数

    //第一种 function getLocalTime(nS) { ).toLocaleString().replace(/:\d{,}$/,' '); } alert(getLocalTime()) ...

  8. jquery通过ajax获取数据（优化、封装）

    下载页面查看: makeGrid.js   ,column.js  ,XiangMuGuanLi.aspx <div class="tb_container" id=&quo ...

  9. JQuery和Ajax在ASP.NET MVC中的基本应用

    当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...

随机推荐

  1. C# 正则表达式、Json

    正则表达式: 正则表达式主要的参考文章:http://www.cnblogs.com/stg609/archive/2009/06/03/1492709.html#anchorD. 需求:将cocos ...

  2. Java中异常处理和设计

    在程序设计中,进行异常处理是非常关键和重要的一部分.一个程序的异常处理框架的好坏直接影响到整个项目的代码质量以及后期维护成本和难度.试想一下,如果一个项目从头到尾没有考虑过异常处理,当程序出错从哪里寻 ...

  3. C++类型转换运算符

    C++中提供4中类型转运算符,分别是:static_cast.dynamic_cast.reinterpret_cast和const_cast; 语法格式如下: 类型转换运算符 < type_i ...

  4. 搭建一个 简易的php版 todolist

    我记得以前使用 wunderlist 但是国外..后来用了半年. 挺方便的.但是.后来慢慢忘了这工具存在 缺少了todolist.效率折半.. so.我搭建了个简单的todolist.  :mytin ...

  5. Node.js包(JXcore)

    Node.js的代码是开放的,并准备好被复制像任何其他Javascript代码.但现在它不可能的了.JXcore 这是一个开源项目,引入了包装和源文件和其他资源加密成JX包一个独特的功能. 考虑大型项 ...

  6. Java中接口与实例化

    一.问题引入         前两天学代理模式的时候想到的,接口可不可以new呢?         接口是特殊的抽象类,接口的方法都默认为  public  abstract  的... 抽象的方法不 ...

  7. 非正式js语法

    有一种格式化的变种(该变种没有通过JSLint测试)略过了花括号,并将if语句放在同一行中. 这样做的好处是该循环语句变得可读性更强(对于每个拥有属性X的元素,就直接对X进行操作). 这样做的结果是只 ...

  8. Js中的window.parent ,window.top,window.self详解

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...

  9. vs2012 aps.net4.0/4.5尚未在web服务器上注册

    安装了vs2015后,vs2012 启动后报错: aps.net4.0/4.5尚未在web服务器上注册 解决办法: 下载微软补丁: http://blogs.msdn.com/b/webdev/arc ...

  10. Linux Shell编程（7）——变量赋值

    =赋值操作符(它的左右两边不能有空白符) 不要搞混了=和-eq,-eq是比赋值操作更高级的测试.注意:等于号(=)根据环境的不同它可能是赋值操作符也可能是一个测试操作符.例子:简单的变量赋值 #!/b ...