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”;
}
