数组循环渲染时重复叠加前序内容的问题排查及修复方案咨询

你的内容叠加问题核心出在JavaScript的searchresult函数里的output变量作用域上：

• 你把let output = "";放在了遍历所有度假村的循环外面，这意味着每处理一个度假村，都会把当前度假村的房间内容追加到之前已经累积的output里。
• 比如处理第一个度假村时，output是它的房间列表；处理第二个度假村时，会把第二个的房间加到output后面，然后把这个混合了两个度假村内容的字符串赋值给第二个度假村的结果容器，以此类推，最终后面的容器就会包含前面所有度假村的内容，造成叠加重复。

把output的初始化移到每个度假村的循环内部，这样每个度假村的内容都是独立生成的，不会互相干扰。另外，建议每次查询前先清空所有结果容器的内容，避免上次查询的残留。

修改后的searchresult函数代码：

let searchresult = function(response) {
    // 先清空所有结果容器的内容，避免上次查询残留
    document.querySelectorAll('.resortcontainer [id$="results"]').forEach(container => {
        container.innerHTML = "";
    });

    for (var key in response) {
        var obj = response[key];
        let container = document.getElementById(key+'results');
        // 每个度假村单独初始化output，确保内容独立
        let output = "";
        for (var prop in obj) {
            output += `<div id="${prop}"><p>${obj[prop].roomname} ${obj[prop].viewname}</p></div>`;
        }
        $(container).html(output);
    }
};

另外注意你的PHP代码存在SQL注入风险，直接把$_POST参数拼到SQL语句里非常危险，建议使用预处理语句来避免这个问题，示例如下：

<?php
include("dbh.php");
mysqli_select_db($conn, "checkavail") or die ("no database");

$checkin = $_POST['checkin'];
$checkout = $_POST['checkout'];
$occupants = $_POST['occupants'];

// 使用预处理语句避免SQL注入
$sql= "SELECT MIN(staydate) AS checkin, MAX(staydate) AS lastnight, MIN(available) AS available, 
       ra.resort AS resortcode, ri.resort AS resortname, ri.room AS roomname, ri.roomcode AS roomcode, 
       ri.view AS viewname, SUM(ra.points*20) AS points, ri.sqfoot AS sqfoot, ri.description AS roomdescription, 
       ri.bedding AS bedding, ri.amenities AS amenities, ri.sleeps AS sleeps, ri.sleep_details AS sleepdetails, 
       ri.layout_img AS layoutimg, ri.room_img AS roomimg, ri.roomimg_thumb AS roomimgthumb 
       FROM resort_availability AS ra 
       JOIN room_info AS ri ON (ra.room = ri.roomcode) 
       WHERE staydate >= ? AND staydate < ? AND sleeps >= ? 
       GROUP BY resortcode, roomcode 
       ORDER BY resortname, points";

$stmt = mysqli_prepare($conn, $sql);
// 绑定参数："ssi"表示三个参数分别是字符串、字符串、整数
mysqli_stmt_bind_param($stmt, "ssi", $checkin, $checkout, $occupants);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

$newarray = [];
foreach($result as $key => $value){
    $newarray[$value['resortcode']][$key] = $value;
}

print_r(json_encode($newarray));
?>

这样既解决了渲染叠加的问题，又大幅提升了代码的安全性。

内容的提问来源于stack exchange，提问作者Bunsen Honeydew