我遇到的问题是下面的代码似乎克隆(复制)了表单或页面上加载的任何其他 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>
最佳答案
问题是因为您正在向当前页面发出 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
{
}
?>
显示.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演示如何做到这一点。
关于php - 页面加载对象两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38190939/