改自:https://blog.csdn.net/weixin_39927850/article/details/81022812

但是它的代码有点问题,所以我这边改了改,最终成功运行

源码

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 src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> --><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script>$(document).ready(function(){$("button").click(function(){var inputVal = $("#keywords").val();$.ajax({type:"GET",url:"search.php?keywords=" + inputVal,dataType:"json",success:function(data){// 弹窗出查询到的信息类型以及所有个数//alert( "Data Saved: " + data);$(function(){var con="";$.each(data,function(i,data){if (data.result == "0") {con+="<p style='color: red;'>请输入关键词...</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><!-- 表单 --><div 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></div><!-- 搜索结果显示区域 --><div id="search_result"></div></body>
</html>

search.php

<?php
header("Content-type:application/json");
//定义参数
$keywords = $_GET["keywords"];
//获取数据库配置
require_once("config.php");
//连接数据库
$con = mysqli_connect($host,$username,$password);//如果连接失败if (!$con){die('连接数据库失败，失败原因：'.mysqli_error());}//设置数据库字符集  mysqli_query($con,"SET NAMES UTF8");//查询数据库//原来错误的顺序  mysql_select_db($db, $con);//正确的mysqli_select_db顺序mysqli_select_db($con,$db);//过滤关键词左右空格$keyword = trim($keywords);//如果输入为空,则返回result为0if (empty($keyword)) {//如果关键词为空，则返回result=0echo "[{\"result\":\"0\"}]";         //这里情况是只要是有keyword的都会返回result为1}else{$sql="SELECT * FROM $tb WHERE title like '%$keyword%'";if ($result=mysqli_query($con,$sql)){// 返回记录数$rowcount=mysqli_num_rows($result);//printf("总共返回 %d 行数据。",$rowcount);// 释放结果集mysqli_free_result($result);}$result = mysqli_query($con,$sql);//返回记录数$num=mysqli_num_rows($result);//如果有结果if ($num) {//有结果为1$search_result = array();while($row = mysqli_fetch_array($result)){$search_result[] = $row;}// 将数组转成json格式echo json_encode($search_result);//echo "[{\"result\":\"1\"}]";}else{/*如果查询无果，则返回result=-1json数据格式，后台返回给前台页面的数据格式，要看你前台json是怎么解析的，比如0在页面中表示关键词为空，result为空，error返回1表示异常，result就写出错原因显示在页面，主要还是看你页面是怎么接受处理的 */echo "[{\"result\":\"-1\"}]";}}
?>

config.php

<?php
$host="localhost:3306";
$username="root";
$password="";
$db="search";
$tb="msg";
?>

数据库: 库名search 表名 msg

工具:xampp (把源码放在xampp的http://localhost:8081/)

源码放进去

PS:xampp的mysql数据库账号root 密码为空记得自己新建数据库

如果xampp遇见问题可以看这篇

:https://blog.csdn.net/wudingan/article/details/99671987

连接数据库错误:https://blog.csdn.net/wudingan/article/details/99649193

如果有不懂的可以留言

AJAX+PHP+MySQL搜索(亲测可用附源码)相关推荐

如何利用python抖音涨粉代码_Python实现抖音关键词热度搜索小程序（附源码）
原博文 2020-06-03 19:03 − 今天给大家带来一个抖音热词小程序,废话不多说,直接上代码 import requests import json import urllib.parse ...
Springboot+mysql+大学生就业管理系统毕业设计 -附源码290915
springboot大学生就业管理系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难 ...
ssm+mysql+养老院信息管理系统毕业设计-附源码181550
ssm养老院信息管理系统摘要随着互联网趋势的到来,各行各业都在考虑利用互联网将自己推广出去,最好方式就是建立自己的互联网系统,并对其进行维护和管理.在现实运用中,应用软件的工作规则和开发步骤,采 ...
Python实现抖音关键词热度搜索小程序（附源码）
今天给大家带来一个抖音热词小程序,废话不多说,直接上代码 import requests import json import urllib.parse import time headers = { ...
Python（Tkinter）+Mysql 交通违章管理系统（附源码）
数据库课程设计. 交通违章管理系统, 实现对车辆.司机.警察.违章及处罚等信息增加.删除.修改.查询,并能够查询和显示出交通违章通知等信息. 涉及:python.tkinter.mysql .pymy ...
unity mysql生成cexcel_【C#附源码】数据库文档生成工具支持（Excel+Html）
[2015] 很多时候,我们在生成数据库文档时,使用某些工具,可效果总不理想,不是内容不详细,就是表现效果一般般.很多还是word.html的.看着真是别扭.本人习惯用Excel,所以闲暇时,就简单的 ...
亲测最新交易猫源码+教程+验号模版+双端跳转
教程:修改数据库账号密码直接使用下载程序:https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd=6zw3
Mysql 8.0 安装详细教程、问题处理、卸载(亲测可用)
下载 Mysql有压缩版zip和安装版msi zip:https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.23-winx64.zip msi ...
mysql myeclipse图书馆_图书馆管理系统myeclipse+mysql 亲测可用
[实例简介] 图书馆管理系统亲测可用 JSP+Servlet+JavaBean+MySQL [实例截图] [核心代码] 图书馆管理系统myeclipsemysql └── 图书馆管理系统myecli ...

AJAX+PHP+MySQL搜索(亲测可用附源码)

改自:https://blog.csdn.net/weixin_39927850/article/details/81022812

PS:xampp的mysql数据库账号root 密码为空记得自己新建数据库

AJAX+PHP+MySQL搜索(亲测可用附源码)相关推荐

最新文章

热门文章

AJAX+PHP+MySQL搜索(亲测可用附源码)

改自:https://blog.csdn.net/weixin_39927850/article/details/81022812

PS:xampp的mysql数据库 账号root 密码为空 记得自己新建数据库

AJAX+PHP+MySQL搜索(亲测可用附源码)相关推荐

最新文章

热门文章

PS:xampp的mysql数据库账号root 密码为空记得自己新建数据库