PHP ajax搜索結果導致頁面變形

Question

嗨，大家好，這是我第一次嘗試對我的網站進行實時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>

再次，我對此很陌生，所以我只是想在這個領域建立我的知識。 解決這個大問題的任何幫助都會很棒

PS我知道有關SQL注入:)，但一次只一步一步x

Answer 1

正如已經指出的那樣-到目前為止使用的方法存在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>

Answer 2

您可以嘗試編寫不帶引號的查詢，即：

 $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>";
 }

干杯!

PHP ajax搜索結果導致頁面變形

問題描述

2 個解決方案

解決方案1
2 已采納 2016-02-29 13:18:46

解決方案2
0

PHP ajax搜索結果導致頁面變形

問題描述

2 個解決方案

解決方案1 2 已采納 2016-02-29 13:18:46

解決方案2 0

解決方案1
2 已采納 2016-02-29 13:18:46

解決方案2
0