php mysql 检索跳转_jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。...

知识点:ajax提交表单,php查询数据库,php返回json数组,javascript遍历输出json数组

演示:

1、当表单无输入任何关键词的时候,返回**“请输入关键词…”**

7cc4411ad509dc71b6d3894411d6ec5e.gif

2、当表单输入的关键词查询无果的时候,返回**“无结果”**

ecb4f1c3f46471fd5295bbeed6223796.gif

3、当表单输入的关键词查询有结果,则返回结果。

c0a03ab4e8230d933f023399bc7f0f65.gif

表单页面

index.html

AJAX搜索

*{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;

}

$(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+="

请输入关键词...

"

}else if(data.result == "1"){

con+="

无结果

"

}else{

con+="

"+data.title+"

"

}

});

console.log(con);

$("#search_result").html(con);

})

return false;

}

})

})

})

AJAX+PHP+MySQL搜索

搜索

服务端

search.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

//配置文件 - BY TANKING

$host="localhost";

$username="root";

$password="root";

$db="test";

$tb="datalist";

?>

数据库结构

e284de83390a46a55ad63dc758eed7a2.png

数据库名:test

表名:datalist

字段:id,title,url

字段解析:

id - 自增ID

title - 标题

url - 页面链接

作者:TANKING

2018-7-12

学习交流微信:face6009

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值