jquery创建了一个ajax关键字数据搜索的实现思想

在web开发过程中，我们经常需要在前台页面输入关键词来搜索数据。我们通常使用的搜索方法是将搜索结果显示在另一个页面上，这并不是构建高性能网站最合适的方式。今天，我想和大家分享如何使用jQuery、MySQL和Ajax创建一个简单而有吸引力的Ajax搜索。这是继《使用jQuery打造一个实用的数据传输模态弹出窗体》之后jquery的第二个实用教程。希望大家在开发项目时，可以根据自己的实际情况，灵活使用click search默认显示所有结果。

输入后显示的搜索结果。

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

找不到相关的搜索词页面。

00-1010文件结构主要使用几个文件：index.php主页、dbcon.php数据库连接文件、search.php搜索处理页面。

第一步创建一个ajax_search的数据库，紧接着创建一个ajax_search表复制代码代码如下：创建表` Ajax _ search `(` id ' int(11)NOT NULL AUTO _ INCREMENT，`名字' varchar(50)NOT NULL，`姓氏' varchar(50)NOT NULL，`年龄' int(11)NOT NULL，`家庭' varchar(50)NOT NULL，`工作' varchar(50)NOT NULL，主键(` id `) ENGINE=Innodb DEFAULT CHARSET=utf8 AUTO _ INVENTION=5；HTML :index.php -程序主页面复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titleAjax教程：使用框架和关系型数据库创建一个创建交互式、快速动态网页应用的网页开发技术搜索/title脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。7 .0/jquery。量滴js /脚本链接rel='样式表'类型=' text/CSS ' media=' screen ' href=' CSS。CSS '/头脚本语言='javascript' $(文档)。就绪（函数(){ //显示加载条函数showLoader(){ $(').搜索-背景')。法丁(200);} //隐藏加载条函数hideLoader(){ $('#sub_cont ').法丁(1500年);$('.搜索-背景')。淡出(200)；};$('#search ').keyup(函数(e){ if(e . key code==13){ show loader()；$('#sub_cont ').法丁(1500年);$(' #内容#sub_cont ').load('search.php？val=' $('#search ').val()、HideLoader())；} });$('.搜索Btn ').单击(函数(){ //显示进度show loader()；$('#sub_cont ').法丁(1500年);$(' #内容#sub_cont ').load('search.php？val=' $('#search ').val()、HideLoader())；});});/脚本正文h1Ajax教程：使用框架和关系型数据库创建一个创建交互式、快速动态网页应用的网页开发技术搜索/h1 div class='textBox '输入类型=' text ' value=' maxlength=' 100 ' name=' search box ' id=' search ' div class=' search BTN '/div/div br clear=' all '/div id=' content ' div class=' search-background ' labelimg src=' http : loader。gif ' alt=' '//label/div id=' sub _ cont '/div/body/html db connect : dbcon . PHP-数据库连接文件复制代码代码如下：php /数据库连接函数$link=mysql_connect('localhost '，' root '，'你的密码');mysql_select_db('ajax_demo '，$ link)；//选择数据库连接？搜索结果页面search.php代码如下复制代码代码如下：服务器端编程语言（Professional Hypertext Preprocessor的缩写）函数checkValues($value) { //使用此函数对所有这些值都要检查防止结构化查询语言注入和跨站点脚本//除去字符串开头和末尾的空格或其他字符$ value=trim($ value)；//Stripslashes if(get _ magic _ quotes _ GPC()){//删除由addslashes()函数添加的反斜杠，该函数用于清理从数据库或超文本标记语言表单中取回的数据。

$ value=长条斜线($ value)；} //转换所有的，字符$value=strtr($value，array _ flip(get _ HTML _ translation _ table(HTML _ ENTITIES)))；//剥去超文本标记语言的标签$ value=strip _ tags($ value)；//引用值$ value=MySQL _ real _ escape _ string($ value)；返回$ value}包含(' dbcon。PHP’)；//加载数据库连接文件$ rec=CheckValues($ _ REQUEST[' val '])；//获取桌子内容if($rec) { $sql='从ajax_search中选择*其中名字像“%$rec%”或姓像“%$rec%”或年龄像“%$rec%”或家像“% $ rec %”；} else { $sql='从ajax_search中选择* ';} $ RSD=MySQL _ query($ SQL)；//查询这条语句$ total=MySQL _ num _ rows($ RSD)；//返回结果集中行的数目？-循环输出结果- ?服务器端编程语言（Professional Hypertext Preprocessor的缩写）回声氘搜索结果/H2 '；回声表边框=' 0 ' id=' content '单元格间距=' 0 '单元格填充=' 0 ' tr bgcolor=' # FFFFCC ' th姓名/th昵称/th年龄/th住址/th职业/th/tr '；while($ row=MySQL _ fetch _ assoc($ RSD)){ echo ' tr class=' each _ rec '；回声td ' .$row['FirstName']./TD '；回声td ' .$row['LastName']./TD '；回声td ' .$row['Age']./TD '；回声td ' .$ row[' home ']./TD '；回声td ' .$row['Job']./TD '；echo '/tr '；} echo '/table '；if($ total==0){ echo ' div class=' no-rec '未找到记录！/div '；}?检查值函数过滤字符串防止结构化查询语言注入和跨站点脚本攻击，MySQL _ query($ SQL)；用来查询语句，mysql_fetch_assoc()用来循环输出结果，怎么样是不是很简单，如果你的项目有需要，可以直接使用这个代码