搜索时页面Header与Input重复显示问题求助

你的问题出在AJAX请求的判断逻辑不可靠，且PHP文件同时承担了「处理AJAX请求返回结果」和「输出完整页面结构」两个角色：

• 当HTTP_X_REQUESTED_WITH请求头不存在（部分服务器环境会屏蔽这个头），AJAX分支的exit()不会执行，代码会继续输出后面的完整HTML（包括Header、搜索框），这些内容被AJAX回调插入到result-container里，就导致了重复显示。
• 初始页面加载时的静态模板逻辑，在非AJAX的URL参数请求场景下也会触发，导致显示混乱。

1. 用更可靠的方式区分AJAX请求 #

直接在AJAX请求里添加明确的GET参数（比如ajax=1），替代依赖HTTP_X_REQUESTED_WITH的判断，避免服务器环境差异导致的检测失败。

2. 严格隔离AJAX与页面输出逻辑 #

当检测到AJAX请求时，仅返回商品结果并立刻终止脚本执行，绝对不输出后续HTML内容；非AJAX请求才输出完整页面结构。

<?php
session_start();
if ($_SESSION["user"] == "" || $_SESSION["premium"] == "") {
    header("Location: index.php");
    exit();
}

$valorInput = isset($_GET["valor"]) ? $_GET["valor"] : "";
$isAjax = isset($_GET["ajax"]) && $_GET["ajax"] == 1;

include "dbconnect.php";

$resultados = array();

if (!empty($valorInput) && $isAjax) {
    $stmt = $conn->prepare("SELECT name, description, link, imagelink, price FROM Articulos WHERE description LIKE ?");
    $param = "%$valorInput%";
    $stmt->bind_param("s", $param);
    $stmt->execute();
    $result = $stmt->get_result();

    while ($row = $result->fetch_assoc()) {
        $resultados[] = '<div class="template">
            <img src="' . $row['imagelink'] . '" alt="' . $row['description'] . '">
            <p>' . $row['name'] . '</p>
            <p>' . $row['description'] . '</p>
            <p>Precio: ' . $row['price'] . '</p>
        </div>';
    }

    $stmt->close();
    echo implode('', $resultados);
    $conn->close();
    exit();
}

$conn->close();
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/inicio.css">
    <title>Buscador de Productos</title>
</head>
<body>

    <header>    
        <h1>Buscador de Productos</h1>
    </header>

    <div id="search-container">
        <input type="text" id="search-box" oninput="actualizarVariable()" placeholder="Buscar productos...">
        <div id="search-results" class="search-results-container"></div>
    </div>

    <div id="result-container" class="container">
        <?php 
        if(empty($valorInput)) {
            // 初始加载时显示静态模板
            for($i = 0; $i < 6; $i++) {
                echo '<div class="template">
                <img src="imagen1.jpg" alt="Plantilla">
                <p>Descripción del Producto 1</p>
                </div>';
            }
        } else {
            // 非AJAX方式的搜索（比如直接URL访问），显示结果
            foreach($resultados as $item) {
                echo $item;
            }
        }
        ?>
    </div>

    <script>
        function actualizarVariable() {
            var valorInput = document.getElementById("search-box").value;
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result-container").innerHTML = this.responseText;
                }
            };
            // 添加ajax=1参数，明确标识AJAX请求
            xhttp.open("GET", "inicio.php?valor=" + valorInput + "&ajax=1", true);
            xhttp.send();
        }
    </script>
    <script src="script.js"></script>
</body>
</html>

• 在AJAX请求URL中添加&ajax=1，PHP通过$isAjax变量明确判断AJAX请求，避免依赖不稳定的请求头。
• 调整初始加载逻辑，仅当搜索参数为空时才显示静态模板，优化非AJAX场景的显示效果。
• 确保AJAX请求处理完成后立刻exit()，彻底阻断后续HTML代码的输出，避免返回多余内容。

内容的提问来源于stack exchange，提问作者jorge garcia