从单个文件提交多个表单,并显示更新的信息而不刷新


Submit several forms from a single file and show updated information without refreshing

我有一个表显示信息从mysql表。我在其中有三个表单添加,删除或更新数据库,如下所示:

<table>
  <form method="POST" action="php/delete.php">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Espéce</th>
        <th>Cri</th>
        <th>Propiétaire</th>
        <th>Age (années)</th>
        <th><input type="submit" name="supprimer" value="Supprimer" /></th>
      </tr>
    </thead>
    <tbody>
      <?php
        $connexion = mysql_connect($hote, $login, $mdp);
        mysql_select_db($bd, $connexion);
        $req = "Select * from animaux;";
        $resultat = mysql_query($req, $connexion);
        while (list($id, $nom, $esp, $cri, $prop, $age) = mysql_fetch_row($resultat)) {
      ?>
      <tr>
        <td><?= $nom ?> </td>
        <td><?= $esp ?></td>
        <td><?= $cri ?></td>
        <td><?= $prop ?></td>
        <td><?= $age ?></td>
        <td> <input type="checkbox" name="choix[]" value=<?= $id ?>></td>
      </tr>
  </form>
  <form method="POST" action="php/maj.php">
      <tr>
        <input type="hidden" name="num" value=<?= $id ?>/>
        <td><input id="nom-maj" type="text" name="nom" value=<?= $nom ?> /></td>
        <td><input id="esp-maj" type="text" name="esp" value=<?= $esp ?> /></td>
        <td><input id="cri-maj" type="text" name="cri" value=<?= $cri ?> /></td>
        <td><input id="prop-maj" type="text" name="prop" value=<?= $prop ?> /></td>
        <td><input id="age-maj" type="text" name="age" value=<?= $age ?>
                   onKeyPress='validationNombres(event)' maxlength="3" /></td>
        <td><input id="btn_maj" type="submit" name="maj" value="Mettre à jour"
        onclick=verif("maj") /></td>
      </tr>
  </form>
    <?php } ?>
  <form method="POST" action="php/add.php">  
      <tr>
        <td><input id="nom-add" type="text" name="nom" placeholder="Nom" /></td>
        <td><input id="esp-add" type="text" name="esp" placeholder="Espéce" /></td>
        <td><input id="cri-add" type="text" name="cri" placeholder="Cri" /></td>
        <td><input id="prop-add" type="text" name="prop" placeholder="Propiétaire" /></td>
        <td><input id="age-add" type="text" name="age" placeholder="Âge"
                   onKeyPress='validationNombres(event)' maxlength="3"  /></td>
        <td><input id="btn-add" type="submit" name="ajouter" value="Ajouter"
        onclick=verif("add") /></td>
     </tr>
 </form> 
  </tbody>
</table>

有没有办法使用这个表单,而不必离开页面,也更新页面?

听起来您需要Ajax。这是JavaScript的一个特性,允许您在不刷新页面的情况下执行HTTP请求。您可以使用JavaScript从表单中获取值并将它们发送到目标URL。

在w3schools有一个很好的Ajax教程:http://www.w3schools.com/ajax/default.asp

尝试jquery post方法..

$("input[name=supprimer]").click(function (e){
    e.preventDefaults(); 
    val = $("input[name=supprimer]").val();
    $.post(
            "php/delete.php", //Ajax file
            "supprimer":val,  // create an object will all values
            function (data) {
                   //Handle Response
                   alert(data.result);
            },
            "json"
        );

});

在delete.php;

if(isset($_POST["supprimer"]))
{
    $supprimer = $_POST["supprimer"];
    //Delete it, Let say result is true
    $result = true;
    echo json_encode(array("result" => $result));
}