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

最新推荐文章于 2021-02-19 07:43:55 发布

一身正气z

最新推荐文章于 2021-02-19 07:43:55 发布

阅读量1.1k

点赞数 2

分类专栏： mysql

本文链接：https://blog.csdn.net/wudingan/article/details/99673892

版权

mysql 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

java web

5 篇文章 0 订阅

订阅专栏

改自: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为0
		  
		  
		if (empty($keyword)) {
			//如果关键词为空，则返回result=0
			echo "[{\"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=-1
					json数据格式，后台返回给前台页面的数据格式，要看你前台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

如果有不懂的可以留言

一身正气z

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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

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

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