PHP Ajax兩次返回HTML

Question

我有一個PHP / Ajax函數，可在文本框中返回具有給定字符的國家/地區列表。 當然，每次編輯文本框時，Ajax都會更新此列表。

Index.PHP調用所有其他文件，類和HTML。 但是，當文本框得到更新時，Ajax將POST變量發送到index.PHP，因為這是調用類名SearchEngine的Search.PHP文件的地方。 但是因為他將其發送到index.php，所以所有內容都會不斷重新加載，並且HTML將返回兩次。

Index.php

<?php
require_once("cgi_bin/connection.php");
require_once("Database_Handler.Class.php");
require_once("HTML_Page.Class.php");
require_once("search.php");

$hostname_conn = "localhost";
$database_conn = "ajax";
$username_conn = "root";
$password_conn = "";

$db = new DatabaseHandler();
$conn = $db->openConnection($hostname_conn, $username_conn, $password_conn, $database_conn);

$IndexPage = new page();
echo $IndexPage->render();
$SearchEngine = new SearchEngine($conn); 
?>

請忽略不良且不安全的數據庫連接。 我目前正在將我所有的代碼都轉換為PDO並對其進行完善，但這將在以后提供。

搜索PHP

<?php
class SearchEngine{

    private $html;

    public function __construct($conn){

        $this->html = '<li class="result">
                            <h3>NameReplace</h3>
                            <a target="_blank" href="ULRReplace"></a>
                        </li>';

        if (isset($_POST["query"])) {
            $search_string = $_POST['query'];
        }

        //$search_string = mysql_real_escape_string($search_string);

        if (strlen($search_string) >= 1 && $search_string !== ' ') {

            $query = 'SELECT * FROM country WHERE name LIKE "%' . $search_string . '%"';
            $result = $conn->prepare($query);
            $result->execute();
            $result_array = $result->fetchAll();

                foreach ($result_array as $result) {
                    $display_name = preg_replace("/" . $search_string . "/i", "<b>" . $search_string . "</b>", $result['name']);
                    $display_url = 'sadf';

                    $output = str_replace('NameReplace', $display_name, $this->html);
                    $output = str_replace('ULRReplace', $display_url, $output);
                    echo($output);
                }
        }
    }

}
?>

最后是Javascript

$(document).ready(function() {

function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);

    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "index.php", //Referring to index.php because this is where the class SearchEngine is called
            data: { query: query_value },
            cache: false,
            success: function(html){
                $("ul#results").html(html);
            }
        });
    }

    return false;
}

$("input#search").keyup(function() {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();

    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    }

    else {
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
});
});

注意：HTML是從Index.php內部調用的“ page”類返回的

我怎么不讓一切都被叫兩次？

謝謝，

編輯：建議將我直接將ajax url指向AutoComplete.php的新文件

自動完成

請說明文件中應包含什么以及原因。 我無能為力。

Answer 1

基本上，只需在您的Ajax調用中添加一個參數，以告訴index.php它被Ajax調用，然后將if語句包裝在打印出實際索引頁面的兩行周圍：

if(!isset($_REQUEST['calledByAjax']))
{
  $IndexPage = new page();
  echo $IndexPage->render();
}

並在您的Ajax電話中：

data: { query: query_value, calledByAjax: 'true'  },

或者制作另一個php頁面，例如ajaxsearch.php，該頁面與index.php相同，但缺少這兩行，然后在Ajax調用中調用它。

Answer 2

第一件事（這是一個示例，尚未測試）

autocomplete.php

<?php
$search_string = $_POST['query'];

$query = 'SELECT * FROM country WHERE name LIKE "%' . $search_string . '%"';
$result = $conn->prepare($query);
$result->execute();
$result_array = $result->fetchAll();

foreach ($result_array as $result) {
    $display_name = preg_replace("/" . $search_string . "/i", "<b>" . $search_string . "</b>", $result['name']);
    $display_url = 'sadf';

    $output = str_replace('NameReplace', $display_name, $this->html);
    $output = str_replace('ULRReplace', $display_url, $output);
 }

echo($output);
?>

autocomplete.js

function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);

if(query_value !== ''){
    $.ajax({
        type: "POST",
        url: "autocomplete.php", //Here change the script for a separated file
        data: { query: query_value },
        cache: false,
        success: function(html){
            $("ul#results").html(html);
        }
    });
}

return false;
}

$("input#search").keyup(function() {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();

    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    } else {
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        search(); // call the function without setTimeout 
    }
  });
 });

祝你好運:)