Question

我尝试通过选择另一种表单上的元素来进行选择更新，而无需刷新页面，我遵循了一些教程（https://www.youtube.com/watch?v=AofECml9pQU）并进行了修改（这是我的代码的一部分）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    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);
            }
        });
        return false;
    }
</script>

<form>
    <h5>Jeu</h5>
    <select name="Jeu" id="liaisonJeu">
        <?php
         $req='SELECT Jeu.NomJeu FROM Jeu';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option>".$ligne[0];
         }
         ?>

    </select>

    <h5>Mode</h5>
    <select name="Mode" id="liaisonMode">
        <?php
         $req='SELECT Mode.NomMode FROM Mode';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option>".$ligne[0];
         }
         ?>

    </select>
    <input type="submit" value="Afficher" onclick="return chk()">
</form>

<div id="LiaisonCompose"></div>

然后将其发送到我的php文件中

 <?php
include('../connexion.inc.php');
?>
<?php
$test = 0;
if (isset($_POST['jeu'])) {
    $jeu  = $_POST['jeu'];
    $test = $test + 1;
}
if (isset($_POST['mode'])) {
    $mode = $_POST['mode'];
    $test = $test + 1;
}
if ($test == 2) {
?>
<form action="LiaisonCompose.php" method="post">
<h5>Etape</h5>
<select name="Etape">
  <?php
    $req      = 'SELECT Etape.NomEtape FROM Etape WHERE Etape.NomEtape LIKE' . $jeu . '_' . $mode . '_%;';
    $resultat = $dbh->query($req);

    while ($ligne = $resultat->fetch()) {
        echo "<option>" . $ligne[0];
    }
?>
</select>
<br /><br />
<input type="submit" value="Valider">
</form>
<?php
} elseif ($test == 1) {
    echo "Missing data";
} else {
    echo "No data";
}
?>

但是当我在第一个表单上提交时，它什么都不会刷新页面

Answer 1

我的第一个问题似乎是“;”的存在。而不是“

 $.ajax({
            type: 'post'; <--- here
            url: "afficheEtapepourLiasion.php",
            data: {
                jeu: jeu,
                mode: mode
            },

但是当我提交它时，除了页面似乎刷新并返回顶部之外，什么都没有发生

编辑：，现在可以正常显示我的步骤（这是因为我通过删除一些html

犯了一个错误

Answer 2

在这里type: 'post';而不是;放置,即：type: 'post',。尝试如下：

function chk(){
        var jeu = document.getElementById('liaisonJeu').value;
        var mode = document.getElementById('liaisonMode').value;
        alert("hi");
        $.ajax({
            type: 'post',
            url: "afficheEtapepourLiasion.php",
            data: {
                jeu: jeu,
                mode: mode
            },
            cache: false,
            success: function(html) {
                $('#LiaisonCompose').html(html);
            }
        });
        return false;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <h5>Jeu</h5>
    <select name="Jeu" id="liaisonJeu">
        <?php
         $req='SELECT Jeu.NomJeu FROM Jeu';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option value='$ligne[0]'>".$ligne[0];."</option>"
         }
         ?>

    </select>

    <h5>Mode</h5>
    <select name="Mode" id="liaisonMode">
        <?php
         $req='SELECT Mode.NomMode FROM Mode';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option value='$ligne[0]'>".$ligne[0]."</option>"
         }
         ?>

    </select>
    <input type="submit" value="Afficher" onclick="return chk()">
</form>

<div id="LiaisonCompose"></div>

`

Answer 3

将onsubmit="return chk()"添加到您的<form>会成功

但是无论如何，如果javascript中有错误，它将发布

为此，您必须检查浏览器控制台（F12），也许我的代码中没有看到某些东西！

如何使自动更新的形式与php和jquery？

3 个答案: