POST提交表单后回显数据 如何避免PHP与HTML代码混写操作元素

PHP本身没有类似JavaScript中document.getElementById直接操作HTML元素的方法，因为PHP是服务端脚本，在HTML内容发送到用户浏览器之前就已经执行完毕，无法直接操作客户端的DOM节点。你要实现HTML中无PHP代码的需求，可以用下面两种常用方案：

方案1：服务端模板变量替换（适合传统表单提交场景） #

把HTML作为独立的模板文件，用占位符代替原有的PHP输出逻辑，PHP读取模板后替换占位符再输出到前端，原始HTML模板内不会出现任何PHP代码。

纯HTML模板（form.html，无任何PHP代码） #

<div><button type="submit" id="myBtn" >buy</button></div>
<form id="myForm" method="post" >
      <input type="text" name="number" id="number" value="{{number}}"></div>
    <div><label>Gewinnklasse:</label>
        <input type="text" name="class" id="class" value="{{class}}"></div>
    <div><label>Zustand:</label>
        <input type="text" name="zustand" id="state" value="{{state}}"></div>
    <div><label>Preis:</label>
        <input type="text" name="price" id="price" value="{{price}}" ></div>
</form>

PHP处理代码（index.php，所有逻辑都在该文件内） #

<?php
// 初始化默认变量值为空
$vars = [
    'number' => '',
    'class' => '',
    'state' => '',
    'price' => ''
];

// 读取JSON文件，修正原代码漏了外层win_lose层级的问题
$str = file_get_contents("win_lose.json");
$json = json_decode($str, true);
$itemList = $json['win_lose'] ?? [];

if (isset($_POST["price"])) {
    $key = array_search($_POST["price"], array_column($itemList, 'price'));
    if ($key !== false) {
        $vars['price'] = $_POST['price'];
        $vars['class'] = $itemList[$key]['class'];
        $vars['number'] = $itemList[$key]['number'];
        $vars['state'] = $itemList[$key]['state'];
    }
}

// 读取HTML模板替换占位符后输出
$html = file_get_contents('form.html');
foreach ($vars as $key => $value) {
    $html = str_replace("{{{$key}}}", htmlspecialchars($value), $html);
}
echo $html;
?>

方案2：AJAX异步请求（无需刷新页面，体验更好） #

用户输入价格点击按钮后，用JS发请求到PHP接口，PHP只负责返回JSON格式的匹配数据，JS拿到数据后自行填充表单，这种方案PHP完全不涉及HTML结构处理，HTML内也不会有PHP代码。

PHP接口代码（get_item.php） #

<?php
header('Content-Type: application/json');
// 读取JSON文件
$str = file_get_contents("win_lose.json");
$json = json_decode($str, true);
$itemList = $json['win_lose'] ?? [];

$return = ['code' => 1, 'data' => []];
if (isset($_POST["price"])) {
    $key = array_search($_POST["price"], array_column($itemList, 'price'));
    if ($key !== false) {
        $return['code'] = 0;
        $return['data'] = $itemList[$key];
    }
}
echo json_encode($return);
?>

纯HTML代码 #

<form id="myForm" method="post" >
    <div><button type="button" id="myBtn" >buy</button></div>
    <input type="text" name="number" id="number" value=""></div>
    <div><label>Gewinnklasse:</label>
        <input type="text" name="class" id="class" value=""></div>
    <div><label>Zustand:</label>
        <input type="text" name="zustand" id="state" value=""></div>
    <div><label>Preis:</label>
        <input type="text" name="price" id="price" value="" ></div>
</form>
<script>
document.getElementById('myBtn').addEventListener('click', function() {
    let price = document.getElementById('price').value;
    fetch('get_item.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'price=' + encodeURIComponent(price)
    }).then(res => res.json()).then(res => {
        if (res.code === 0) {
            document.getElementById('number').value = res.data.number;
            document.getElementById('class').value = res.data.class;
            document.getElementById('state').value = res.data.state;
        }
    })
})
</script>

补充注意 #

你原代码读取JSON的时候漏了外层win_lose的层级，直接遍历$json会拿不到数据，上面的示例已经做了修正。

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