這篇文章主要介紹了關於jQuery AJAX PHP MySQL開發搜尋無跳轉無刷新的功能，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
知識點：ajax提交表單，php查詢資料庫，php返回json數組，javascript遍歷輸出json數組
1、當表單無輸入任何關鍵字的時候，返回"請輸入關鍵字..."
2、當表單輸入的關鍵字查詢無果的時候，返回"無結果"
3、當表單輸入的關鍵字查詢有結果，則傳回結果。
index.html
nbsp;html>
<meta>
<meta>
<title>AJAX搜索</title>
<style>
*{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></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>请输入关键词..."
}else if(data.result == "1"){
con+="<p>无结果"
}else{
con+="<p>"+data.title+""
}
});
console.log(con);
$("#search_result").html(con);
})
return false;
}
})
})
})
</script>
<!-- 表单 -->
<p>
</p>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"; ?>
#資料庫名稱：test
表名：datalist
欄位：id,title,url
欄位解析：
id - 自增ID
title - 標題
url - 頁面連結
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
#以上是jQuery+AJAX+PHP+MySQL開發搜尋無跳轉無刷新的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
