如何在PHP中实现AJAX POST请求的多数据列表展示？

我编写了如下AJAX代码：

$.ajax({
    type: "POST",
    url: "inputvalores.php",
    data: {
        id: id,
        nomeproduto: nomeproduto,
        tec: tec,
        tipi: tipi,
        quantProduto: quantProduto,
        valorAduaneiro: valorAduaneiro,
        breadzin: breadzin
    },
    success: function(data){
        $("#resposta").html(data);
    },
    error: function(){
        console.log(error);
    }
});

对应的PHP代码inputvalores.php如下：

<?php
require_once '../config.php';

if (isset($_POST['id'])) {
    $id = $_POST['id'];
    $nomeproduto = $_POST['nomeproduto'];
    $tec = $_POST['tec'];
    $tipi = $_POST['tipi'];
    $quantProduto = $_POST['quantProduto'];
    $valorAduaneiro = $_POST['valorAduaneiro'];
    $breadzin = $_POST['breadzin'];

    echo '<div>'.$id.'</div>';
    echo '<div class="breadcrumbs">'.$breadzin.'</div>';
    echo '<li class="produto">';
    echo '<div class="ordem">'.$id.'</div>';
    echo '<div class="nomedoproduto">'.$nomeproduto.'</div>';
    echo '<div class="quantidade">'.$quantProduto.'</div>';
    echo '<div class="botoes"><button class="editar">Editar</button>
          <button class="excluir">Excluir</button></div>';
    echo '</li>';
}
?>

每次发起新的AJAX POST请求时，新提交的数据会覆盖之前的内容，无法实现列表展示。我是AJAX、PHP、jQuery及JavaScript新手，尝试过JSON.stringify等方法但无效，请问如何实现多数据的列表展示？

1. 修复前端AJAX的内容追加逻辑 #

你当前用$("#resposta").html(data)会直接替换容器内所有内容，改成append()就能把新内容追加到现有内容后面。另外注意避免重复输出顶部的id和面包屑，只追加商品列表项：

$.ajax({
    type: "POST",
    url: "inputvalores.php",
    data: {
        id: id,
        nomeproduto: nomeproduto,
        tec: tec,
        tipi: tipi,
        quantProduto: quantProduto,
        valorAduaneiro: valorAduaneiro,
        breadzin: breadzin
    },
    success: function(data){
        // 提取返回内容中的商品项，追加到容器
        $("#resposta").append($(data).find('.produto'));
    },
    error: function(xhr, status, error){
        console.log(error); // 修复错误日志变量未定义问题
    }
});

如果面包屑等固定内容不需要每次提交都刷新，建议直接写在页面的静态HTML里，不要通过AJAX返回。

2. 优化PHP返回内容（可选） #

不想在前端过滤内容的话，可以让PHP只返回商品列表项：

<?php
require_once '../config.php';

if (isset($_POST['id'])) {
    $id = $_POST['id'];
    $nomeproduto = $_POST['nomeproduto'];
    $tec = $_POST['tec'];
    $tipi = $_POST['tipi'];
    $quantProduto = $_POST['quantProduto'];
    $valorAduaneiro = $_POST['valorAduaneiro'];
    $breadzin = $_POST['breadzin'];

    // 只输出商品列表项
    echo '<li class="produto">';
    echo '<div class="ordem">'.$id.'</div>';
    echo '<div class="nomedoproduto">'.$nomeproduto.'</div>';
    echo '<div class="quantidade">'.$quantProduto.'</div>';
    echo '<div class="botoes"><button class="editar">Editar</button>
          <button class="excluir">Excluir</button></div>';
    echo '</li>';
}
?>

此时前端可以直接追加返回内容：

success: function(data){
    $("#resposta").append(data);
}

3. 持久化数据（可选，页面刷新后保留列表） #

如果希望页面刷新后列表还存在，需要把数据存入数据库：

• 在PHP中添加插入数据库的逻辑（假设已有produtos表）：

// 假设使用PDO连接数据库
$stmt = $pdo->prepare("INSERT INTO produtos (id, nomeproduto, tec, tipi, quantProduto, valorAduaneiro, breadzin) VALUES (?, ?, ?, ?, ?, ?, ?)");
$stmt->execute([$id, $nomeproduto, $tec, $tipi, $quantProduto, $valorAduaneiro, $breadzin]);

• 页面加载时请求所有已存数据并渲染：

// 页面初始化时加载已有商品
$(document).ready(function(){
    $.ajax({
        url: "get_produtos.php",
        type: "GET",
        success: function(data){
            $("#resposta").html(data);
        }
    });
});

对应的get_produtos.php查询数据库并返回所有商品：

<?php
require_once '../config.php';

$stmt = $pdo->query("SELECT * FROM produtos");
$produtos = $stmt->fetchAll();

foreach($produtos as $produto){
    echo '<li class="produto">';
    echo '<div class="ordem">'.$produto['id'].'</div>';
    echo '<div class="nomedoproduto">'.$produto['nomeproduto'].'</div>';
    echo '<div class="quantidade">'.$produto['quantProduto'].'</div>';
    echo '<div class="botoes"><button class="editar">Editar</button>
          <button class="excluir">Excluir</button></div>';
    echo '</li>';
}
?>

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