Question

我遇到的问题是下面的代码似乎克隆（复制）表单或页面上加载的任何其他HTML。

第一次加载页面时，表单显示为正常但是当我输入搜索文本框并删除表单显示两次的所有字符（或我在页面上放置的任何其他HTML）时

如何在没有重复的表格或任何其他页面内容的情况下加载页面？

<?php
    include('..\db.php');
    $con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);
    $q1 = mysqli_query($con, "SELECT * FROM tbl1 username");
    $data = "";

    // if the search is true 
    if(isset($_POST['search']))
    {
        // 
        $var = $_POST['search'];

        if ($query = mysqli_query($con,"SELECT username FROMtbl1 WHERE username LIKE '%$var%'"))
        {
            // possible creating duplicate results 
            while($row = mysqli_fetch_array($query))
            {
                $data .= '<div>' . $row['username'] . '</div>';  
            }
            echo $data;
        }
    }
    else
    {
    }
?>
<HTML>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $('.input').keyup(function() {
                var a = $('.input').val();
                $.post('livesusers.php', { "search": a }, function(data) {
                    $('#display').html(data);
                });
            });
        });
    </script>
</head>
<body>
    // form to input text  and search
    <h1>Search For User</h1>
    <form action= "livesusers.php" method='POST'>
        <input type="text" name="search" class='input'>
    </form>
    <div id='display' style='margin-top: 100px'></div>
</body>

Answer 1

问题是因为你正在向当前页面发送一个AJAX请求。请求的响应包括PHP代码以及它下面的HTML，因此当前页面被完整克隆。要解决此问题，只需将PHP代码放在自己的文件中，然后向该位置发出AJAX请求即可。试试这个：

response.php（不管你喜欢这个名字）

<?php
    include('..\db.php');
    $con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);
    $q1 = mysqli_query($con, "SELECT * FROM tbl1 username");
    $data = "";

    // if the search is true 
    if(isset($_POST['search']))
    {
        // 
        $var = $_POST['search'];

        if ($query = mysqli_query($con,"SELECT username FROMtbl1 WHERE username LIKE '%$var%'"))
        {
            // possible creating duplicate results 
            while($row = mysqli_fetch_array($query))
            {
                $data .= '<div>' . $row['username'] . '</div>';  
            }
            echo $data;
        }
    }
    else
    {
    }
?>

Display.php的

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $('.input').keyup(function() {
                var a = $('.input').val();
                // change the page name below as required...
                $.post('response.php', { "search": a }, function(data) {
                    $('#display').html(data);
                });
            });
        });
    </script>
</head>
<body>
    <h1>Search For User</h1>
    <form action= "livesusers.php" method='POST'>
        <input type="text" name="search" class='input'>
    </form>
    <div id='display' style='margin-top: 100px'></div>
</body>
</html>

为了使其更加强大，您应该考虑更改PHP代码以返回JSON而不是未编码的字符串。有关如何执行此操作的说明，请参阅this question。

Answer 2

以下代码存在问题，它将数据添加到自身两次！

$data .= $data . '<div>' . $row['username'] . '</div>';

试试这个

$data .= '<div>' . $row['username'] . '</div>';

页面加载对象两次

2 个答案: