如何用PHP和jQuery实现无刷新自动更新表单？代码故障求助

让我们一步步排查并解决你的问题：

核心问题分析 #

页面刷新且无内容的主要原因是Ajax代码存在语法错误，导致JS函数失效，浏览器触发了表单的默认提交行为；同时PHP端的SQL语句也有语法问题，无法正确返回数据。

1. 修复Ajax配置的语法错误 #

你的jQuery Ajax配置里，type: 'post';这一行用了分号，但对象属性之间必须用逗号分隔，这个语法错误直接导致chk()函数无法执行，Ajax请求根本没发出去，表单就默认提交刷新了页面。

修复后的JS代码：

function chk() {
  var jeu = document.getElementById('liaisonJeu').value;
  var mode = document.getElementById('liaisonMode').value;
  $.ajax({
    type: 'post', // 把分号改成逗号
    url: "afficheEtapepourLiasion.php",
    data: { jeu: jeu, mode: mode },
    cache: false,
    success: function(html) {
      $('#LiaisonCompose').html(html);
    },
    // 新增错误回调，方便调试问题
    error: function(xhr, status, error) {
      console.log("Ajax请求出错: ", error);
    }
  });
  return false;
}

2. 给表单添加双重防提交保障 #

虽然按钮的onclick="return chk()"会返回false，但为了避免JS出错时表单仍提交，建议给表单加上onsubmit事件，或者把提交按钮改成普通按钮：

<!-- 方案1：给表单加onsubmit事件 -->
<form onsubmit="return chk()">
  <!-- 表单内容 -->
  <input type="submit" value="Afficher">
</form>

<!-- 方案2：改用普通按钮，彻底避免默认提交 -->
<form>
  <!-- 表单内容 -->
  <button type="button" onclick="chk()">Afficher</button>
</form>

3. 修复PHP端的SQL语法与安全问题 #

你的SQL查询中，LIKE后面的匹配字符串没有用单引号包裹，这会直接导致SQL语法错误，无法返回结果；同时直接拼接用户输入还会有SQL注入风险，必须用预处理语句。

修复后的PHP代码：

<?php include('../connexion.inc.php'); ?>
<?php
$test = 0;
$jeu = $mode = '';
if (isset($_POST['jeu'])) {
    $jeu = $_POST['jeu'];
    $test++;
}
if (isset($_POST['mode'])) {
    $mode = $_POST['mode'];
    $test++;
}
if ($test == 2) {
    // 使用预处理语句避免SQL注入，同时修正LIKE的语法
    $req = 'SELECT Etape.NomEtape FROM Etape WHERE Etape.NomEtape LIKE ?';
    $stmt = $dbh->prepare($req);
    $likePattern = $jeu . '_' . $mode . '_%';
    $stmt->execute([$likePattern]);
    $resultat = $stmt->fetchAll();
?>
<form action="LiaisonCompose.php" method="post">
    <h5>Etape</h5>
    <select name="Etape">
        <?php foreach ($resultat as $ligne): ?>
            <!-- 闭合option标签，同时转义内容避免XSS -->
            <option><?php echo htmlspecialchars($ligne['NomEtape']); ?></option>
        <?php endforeach; ?>
    </select>
    <br /><br />
    <input type="submit" value="Valider">
</form>
<?php } elseif ($test == 1) {
    echo "Missing data";
} else {
    echo "No data";
} ?>

4. 修复HTML标签闭合问题 #

你之前的<option>标签没有闭合，这会导致DOM结构异常，可能影响JS获取下拉框的值，修复时记得加上闭合标签：

<!-- 原错误写法 -->
echo "<option>".$ligne[0];

<!-- 修复后 -->
echo "<option>" . htmlspecialchars($ligne[0]) . "</option>";

调试小技巧 #

• 打开浏览器开发者工具（F12），切换到Console标签，查看是否有JS语法错误；
• 切换到Network标签，查看Ajax请求是否发送成功，以及服务器返回的响应内容，确认PHP是否正确输出HTML。

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