PHP ajax 搜索结果搞砸了我的页面

PHP ajax search results in mucking up my page

本文关键字:我的 ajax 搜索结果 PHP      更新时间:2023-09-26

嗨,伙计们,这是我第一次尝试对我的网站进行实时 ajax 搜索。我是 php 的新手,所以在这个问题上的任何帮助都会很棒。我在这里和那里遵循一些教程并试图让它工作,但每次我按搜索时都没有出现任何结果。关于此事的任何帮助都会很棒。

法典:

<?php
mysql_connect("localhost","root","") or die ("could not connect");
mysql_select_db("reg") or die ("could not find db");
if (isset($_POST['search_term']) == true && empty($_POST['search_term']) == false) {
    $search_term = mysql_real_escape_string($_POST['search_term']);
    $query = mysql_query("SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '$search_term%'");
    while(($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>',$row['ingName'],'</li>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
        <input type="text" class="searchFunction"> <input type = "submit" value ="Search">
        <div class = "dropdown">
        <ul class = "result">
        </ul>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.searchFunction').keyup(function() {
        var search_term = $(this) .attr('value');
        $.post('build.php', {search_term:search_term}, function(data) {
            $('.result').html(data);
            $('.result li').click(function() {
            var result_value = $(this).text();
            $('.searchFunction').attr('value', result_value);
            $('.result').html('');
    });
    });
});
});
    </script>
  </body>
</html>
同样,我对此

很陌生,所以我只是想围绕这个领域建立我的知识。解决这个大问题的任何帮助都会很棒

附言我知道sql注入:)但现在一步一步 X

正如已经指出的那样 - 到目前为止使用的方法存在SQL注入的风险,因此在致力于使用现已弃用的mysql函数套件之前,明智的做法是阅读并实现mysqli当您使用prepared statements时,它将提供针对恶意SQL注入攻击的重要保护。

由于您的ajax查询被发送到同一页面(通过发布的代码的外观),要做的一件重要事情是在发送响应后退出php-否则您最终会发送整个页面(这也将是格式不正确的,因为html标签之外会有内容),我怀疑这不是您想要的目标。

在我未经训练的眼中,ajax 函数看起来不错,但由于我不使用 jQuery,我很可能错了,错过了一些重要的东西。

<?php
    /*
       as the rest of the page doesn't use a db connection, 
       only load the db conn if the page is requested via post
    */
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        /* assign db connection to a variable */
        $conn=mysql_connect("localhost","root","") or die ("could not connect");
        mysql_select_db("reg") or die ("could not find db");
        /* empty() does an implied `isset` */
        if ( !empty( $_POST['search_term'] ) ) {
            $search_term = mysql_real_escape_string( $_POST['search_term'] );
            /* 
               You ought to look at using mysqli ( prepared statements )
               rather than the now deprecated `mysql_*` functions
            */
            $query = mysql_query( "SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '$search_term%'", $conn );
            if( $query ){/* only send response if the query succeeds */
                while( $row = mysql_fetch_assoc( $query ) ) {
                    echo '<li>',$row['ingName'],'</li>';
                }
            }
        }
        mysql_close( $conn );
        /* make sure that the rest of the page is not sent back with the response data */
        exit();
    }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gotta have a title!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            $('.searchFunction').keyup( function( event ) {
                /* I could not get this to work - I don't know what this is doing as I don't use jQuery */
                /*var search_term = $(this).attr('value');*/

                /* this however does work */
                var el=event.target || event.srcElement;
                var search_term=el.value;
                /* maybe better to search after a few letters have been added? */
                if( search_term.length < 2 )return;
                /* it appears you are posting to the same page */
                $.post( document.location.href, { search_term:search_term }, function( data ) {
                    $('.result').html( data );
                    $('.result li').click( function( event ) {
                        var result_value = $(this).text();
                        $('.searchFunction').attr('value', result_value );
                        $('.result').html('');
                    });
                });
            });
        });
    </script>
  </head>
  <body>
    <div class="container">
        <input type="text" name='search_term' class="searchFunction">
        <input type="submit" value="Search">
        <div class="dropdown">
            <ul class="result"></ul>
        </div>
    </div>
  </body>
</html>

完整的工作示例

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        if ( !empty( $_POST['search_term'] ) ) { 
            $dbhost =   'localhost';
            $dbuser =   'root'; 
            $dbpwd  =   'xxx'; 
            $dbname =   'xxx';
            $db =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
            /* using lower() helped account for vagueries in spelling */
            $sql='select * from `maps` where 
                    lower( `location_name` ) like lower( "%'.$_POST['search_term'].'%" );';
            $res=$db->query( $sql );
            if( $res ){
                while( $rs=$res->fetch_object() ){
                    echo "<li>".$rs->location_name."</li>";
                }
            }
        }
        exit();
    }
?>
<!doctype html>
<html lang='en'>
  <head>
    <title>Gotta have a title!</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
    <script type='text/javascript'>
        $( document ).ready( function() {
            $('.searchFunction').keyup( function( event ) {
                var search_term=this.value;
                /* maybe better to search after a few letters have been added? */
               if( search_term.length < 5 )return;
                /* it appears you are posting to the same page */
                $.post( document.location.href, { search_term:search_term }, function( data ) {
                    $('.result').html( data );
                    $('.result li').click( function( event ) {
                        var result_value = $(this).text();
                        $('.searchFunction').attr( 'value', result_value );
                        $('.result').html('');
                    });
                });
            });
        });
    </script>
  </head>
  <body>
    <div class='container'>
        <input type='text' name='search_term' class='searchFunction'>
        <input type='submit' value='Search'>
        <div class='dropdown'>
            <ul class='result'></ul>
        </div>
    </div>
  </body>
</html>

您可以尝试编写不带引号的查询,即:

 $query = mysql_query("SELECT ingName FROM ing WHERE ingName   LIKE   '$search_term%'");

您还可以通过使用'%$search_term%'而不是'$search_term'来放松搜索。

另一个可能的问题是 mysql_connect() .我正在使用该功能,但它对我不起作用,所以我决定使用对我有用的mysqli_connect()功能。

还有一些建议,你不需要==true你也可以使用 !empty($_POST['search_term']) .

一旦你通过学习,你也可以尝试PDO功能,这比启动你自己的连接要好得多。您可以像这样启动 PDO 连接。

$dbh1 = new PDO('mysql:dbname=dbname;host=127.0.0.1', 'username', 'dbpass');

然后你可以像这样搜索。 - 使用初始化的连接。

 $query = "SELECT ingName from ing WHERE ingName LIKE %$search_term%";
 $stmt = $dbh1->prepare($query);
 $stmt->execute();
 $allRows = count($stmt);
 $row = $stmt->fetch(PDO::fetch_assoc);
 foreach($row as $one){
      echo "<li>".$one['ingName']."</li><br>";
 }

干杯!