Question

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

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

import React, { PropTypes, Component } from 'react'

import Table from 'material-ui/lib/table/table';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRow from 'material-ui/lib/table/table-row';
import TableHeader from 'material-ui/lib/table/table-header';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import TableBody from 'material-ui/lib/table/table-body';


export default class MagicTableReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
            fixedHeader: true,
            fixedFooter: true,
            stripedRows: false,
            showRowHover: true,
            selectable: true,
            multiSelectable: false,
            enableSelectAll: false,
            deselectOnClickaway: true,
            height: '300px',
        };
    };


    _onRowSelection(e){
        console.log(e)

    }


    render() {

        return (

            <div>
                <div className="col-sm-6">
                    <h1>MagicTableReact</h1>
                    <Table
                        height={this.state.height}
                        fixedHeader={this.state.fixedHeader}
                        fixedFooter={this.state.fixedFooter}
                        selectable={this.state.selectable}
                        multiSelectable={this.state.multiSelectable}
                        >
                        <TableHeader>
                            <TableRow>
                                <TableHeaderColumn>ID</TableHeaderColumn>
                                <TableHeaderColumn>Name</TableHeaderColumn>
                            </TableRow>
                        </TableHeader>
                        <TableBody
                        >
                            {this.state.data.map((user, i) =>
                                <TableRow key={i}
                                    onRowSelection={this._onRowSelection.bind(this)}>
                                    <TableRowColumn>{user.id}</TableRowColumn>
                                    <TableRowColumn>{user.name}</TableRowColumn>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        )
    }
}

MagicTableReact.propTypes = {

};

Fetch.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";
}

Answer 1

这里有一些问题。

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

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

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

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

然后，您将使用错误的变量$result作为

while($output=mysqli_fetch_assoc($result))

应该是$query，但是又一次;也查询它。

$query = "select * from names";

也是如此

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

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

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

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

检查PHP和MySQL上的错误：

另外，检查你的JS控制台。

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

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

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

您目前的代码向SQL injection开放。使用prepared statements或PDO与prepared statements。

HTML stickler 。

将<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进行实时搜索无效

1 个答案: