这篇文章主要介绍了关于jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
知识点：ajax提交表单，php查询数据库，php返回json数组，javascript遍历输出json数组
演示：
1、当表单无输入任何关键词的时候，返回"请输入关键词..."
![2255025658-5b4754bdb4764_articlex[1].gif](https://img.php.cn//upload/image/729/230/465/1531467356531159.gif "1531467356531159.gif")
2、当表单输入的关键词查询无果的时候，返回"无结果"
![4138693906-5b47550a75499_articlex[1].gif](https://img.php.cn//upload/image/665/895/524/1531467362119539.gif "1531467362119539.gif")
3、当表单输入的关键词查询有结果，则返回结果。
![1682155967-5b47556cc3397_articlex[1].gif](https://img.php.cn//upload/image/981/775/585/1531467369535025.gif "1531467369535025.gif")
表单页面
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AJAX搜索</title>
<style type="text/css">
*{margin:0px;padding:0px;}
h2{
text-align: center;
}
#search_con{
width: 300px;
margin:10px auto;
}
#keywords{
width: 300px;
margin-top: 10px;
height: 30px;
}
#btn{
width: 305px;
height: 35px;
margin-top: 10px;
}
#search_result{
width: 300px;
margin:30px auto;
}
</style>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var inputVal = $("#keywords").val();
$.ajax({
type:"GET",
url:"search.php?keywords=" + inputVal,
dataType:"json",
success:function(data){
$(function(){
var con="";
$.each(data,function(i,data){
if (data.result == "0") {
con+="<p>请输入关键词...</p>"
}else if(data.result == "1"){
con+="<p>无结果</p>"
}else{
con+="<p>"+data.title+"</p>"
}
});
console.log(con);
$("#search_result").html(con);
})
return false;
}
})
})
})
</script>
</head>
<body>
<!-- 表单 -->
<p id="search_con">
<form action="##">
<h2>AJAX+PHP+MySQL搜索</h2>
<input type="text" name="keywords" id="keywords" placeholder="搜索关键词..."><br/>
<button name="button" type="button" id="btn">搜索</button>
</form>
</p>
<!-- 搜索结果显示区域 -->
<p id="search_result"></p>
</body>
</html>登录后复制
服务端
search.php
<?php
header("Content-type:application/json");
//定义参数
$keywords = $_GET["keywords"];
//获取数据库配置
require_once("config.php");
//连接数据库
$con = mysql_connect($host,$username,$password);
if (!$con)
{
die('连接数据库失败，失败原因：' . mysql_error());
}
//设置数据库字符集
mysql_query("SET NAMES UTF8");
//查询数据库
mysql_select_db($db, $con);
//过滤关键词左右空格
$keyword = trim($keywords);
if (empty($keyword)) {
//如果关键词为空，则返回result=0
echo "[{\"result\":\"0\"}]";
}else{
$result = mysql_query("SELECT * FROM $tb WHERE title like '%$keyword%' ORDER BY ID DESC");
$num = mysql_num_rows($result);
if ($num) {
$search_result = array();
while($row = mysql_fetch_array($result)){
$search_result[] = $row;
}
// 将数组转成json格式
echo json_encode($search_result);
}else{
//如果查询无果，则返回result=1
echo "[{\"result\":\"1\"}]";
}
}
?>登录后复制
数据库配置
config.php
<?php
//配置文件 - BY TANKING
$host="localhost";
$username="root";
$password="root";
$db="test";
$tb="datalist";
?>
登录后复制
数据库结构
![262472067-5b4753fa85e54_articlex[1].png](https://img.php.cn//upload/image/295/227/750/1531467496510126.png "1531467496510126.png")
数据库名：test
表名：datalist
字段：id,title,url
字段解析：
id - 自增ID
title - 标题
url - 页面链接
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于vue中extend,mixins,extends,components,install的操作
PHP的安装以及与apache整合的介绍
以上是jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能的详细内容。更多信息请关注PHP中文网其他相关文章！
