MySQL、PHP 和 AJAX 的实时搜索不工作

Question

好的，我正在尝试使用 PHP、MySQL 和 AJAX 进行实时搜索。我不确定我会不会错了。我的数据库托管在 phpMyAdmin 上。数据库名称是 Info，我要访问的 table 是名称。

我的三个页面是 index.php connect.php 和 fetch.php Index.php

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
        <style>

            #here
                {
                    width:400px;
                    height:300px;
                    border: 1px solid grey;
                    display:none;
                }

            #here a{
                display:block;
                width:98%;
                padding:1%;
                font-size:20px;
                border-bottom:1px solid grey;
            }

                </style>
        <body>

            <script src=jq.js></script>

            <script src="jq.js">
                $(document).ready(function(e)
                {
                    $("search").keyup(function()
                    {
                        $("#here").show();
                        var x = $(this).val();
                        $.ajax(
                            {
                                type:'GET',
                                url:'fetch.php',
                                data: 'q='+x,
                                success:function(data)
                                {
                                    $("#here").html(data);
                                }
                                ,
                            });
                    });
                });




            </script>


            <h1>Live Search</h1>
            <input type="search" name="search" id="search">
            <div id="here">

            </div>
        </body>
</html>

Fetch.php

<?php
if(!empty($_GET['q']))
{

    include 'connect.php';
    $q=$_GET['q'];
    $query = "select * from names where names like '%$q%';";
    while($output=mysqli_fetch_assoc($result))
    {
        echo '<a>'.$output['names'].'</a>';
    }
     $query = "select * from names";
}

fetch.php

    ?>

<?php
$host="localhost";
$user="andremac96";
$password="";
$db="Info";
$conn = mysqli_connect($host,$user,$password,$db);
?>

Answer 1

这里有一些错误。

首先，您从未执行过以下查询：

$query = "select * from names where names like '%$q%';";

因此，您需要包含 mysqli_query() 并将数据库连接传递给它。

$query = mysqli_query($conn, "select * from names where names like '%$q%';");

那么，您将一直使用错误的变量 $result for

while($output=mysqli_fetch_assoc($result))

本来应该是 $query，但又一次；也在查询它。

$query = "select * from names";

也是一样

$query = mysqli_query($conn, "select * from names");

^ 不确定你想用那个做什么。

然后您忘记在 $("search").keyup(function() 中输入 # 作为搜索 ID，应该读作：

$("#search").keyup(function()

检查 PHP 和 MySQL 上的错误：

此外，请检查您的 JS 控制台。

然后是echo '<a>'.$output['names'].'</a>';

^ 也不确定你想在这里做什么。

然后第二个 <script src="jq.js"> 应该读作 <script>。

您当前的代码对SQL injection. Use prepared statements, or PDO with prepared statements开放。

HTML 斯蒂克勒.

将 <style>...</style> 放在 <head></head> 内。某些浏览器会在 HTML 来源中抛出警告。

编辑：（重写我使用的测试成功的内容）。

旁注：我添加了 <form></form> 标签，但没有它们也能正常工作。

文件#1：

<!DOCTYPE html>
<html>
    <head>
        <title></title>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

        <style>

            #here
                {
                    width:400px;
                    height:300px;
                    border: 1px solid grey;
                    display:none;
                }

            #here a{
                display:block;
                width:98%;
                padding:1%;
                font-size:20px;
                border-bottom:1px solid grey;
            }

                </style>

    </head>

        <body>


            <script>
                $(document).ready(function(e)
                {
                    $("#search").keyup(function()
                    {
                        $("#here").show();
                        var x = $(this).val();
                        $.ajax(
                            {
                                type:'GET',
                                url:'fetch.php',
                                data: 'q='+x,
                                success:function(data)
                                {
                                    $("#here").html(data);
                                }
                                ,
                            });
                    });
                });


            </script>


<h1>Live Search</h1>
<form>
    <input type="search" name="search" id="search">
</form>

    <div id="here">

    </div>


        </body>
</html>

文件 #2: (fetch.php)

<?php 

 include 'connect.php'; // being the MySQLi_ API

if(!empty($_GET['q']))
{


$q= mysqli_real_escape_string($conn, $_GET['q']);


    $query = mysqli_query($conn, "select * from names where names like '%$q%';") 
             or die(mysqli_error($conn));


    while($output=mysqli_fetch_assoc($query))
    {

        echo '<a>'.$output['names'].'</a>';


    }
//     $query = "select * from names";
}

确保您的 .php 文件路径正确并且您的脚本可以访问它们。

将 error reporting 添加到文件顶部，这将有助于查找错误。

<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Then the rest of your code

旁注：显示错误只应在试运行中进行，绝不能在生产中进行。

MySQL、PHP 和 AJAX 的实时搜索不工作

Live search with MySQL, PHP, and AJAX is not working

php

mysql

ajax

jquery

livesearch