Question

我在每个网站上都搜索过，但我找不到我想要的内容：我会更容易，看到我拥有的东西： my page ;)

所以对于每个单选按钮，我想设置我的表的显示。

例如：如果我选择“Alphabétique”，则值按字母顺序排序。

我知道我需要使用Ajax，但我对此并不满意。除此之外，我正在MVC编程我的项目。我对Google，Stack，OpenClassroom等进行了一些研究。我不明白我在Ajax中需要做什么，或者我需要添加指令。所以这是我的代码：

controllerBoutique.php（Controller）：

stuart

boutique.php :(查看）

<?php 
 require('../Views/codes/boutique.php'); 
 require('../Models/vehicule.php');
 $query = getVehiculesByAlpha();
 require('../Views/codes/tabAffich.php');
?>

tabAffich.php :(查看表格）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>Rentcar - Boutique</title>
  <link rel="stylesheet" href="../Views/styles/style2.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>
<body>
  <?php require("menu.php");?>
  <section id="section" class="main-section cleanbg">
    <div class="container">
      <label>Trier par :</label>
      <div class="single-col">
        <div class="styled-input-container">
          <div class="styled-input-single">
            <input type="radio" name="fieldset-1" id="radioAlpha" value="Alpha" checked="checked"/>
            <label for="radioAlpha">Alphabétique</label>
          </div>
          <div class="styled-input-single">
            <input type="radio" name="fieldset-1" id="radioModel" value ="Model"/>
            <label for="radioModel">Modèle</label>
          </div>
          <div class="styled-input-single">
            <input type="radio" name="fieldset-1" id="radioKm" value ="Km"/>
            <label for="radioKm">Kilométrage</label>
          </div>
          <div class="styled-input-single">
            <input type="radio" name="fieldset-1" id="radioDispo" value ="Dispo"/>
            <label for ="radioDispo"> Disponible </label>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <label class="lblSearch"> Rechercher :</label>
      <input type="text" id="search-box" class="search-box">
      <button class="btnSearch">Chercher</button>
    </div>
  </section>
  <section id="section" class="main-section cleanbg">
    <div class="container">
      <hr>

vehicule.php（模特）：

<div class="wrapper">
  <div class="table">
   <div class="row header">
     <div class = "cell">Marque</div>
     <div class = "cell">Modèle</div>
     <div class= "cell">Kilométrage</div>
   </div>
   <?php 
     while($res = $query->fetch()){
   ?> 
   <div class="row">
     <div class ="cell">
     <?php echo $res['nom'];?>
   </div>
   <div class="cell">
     <?php echo $res['modele'];?>
   </div>
   <div class="cell">
     <?php echo $res['km'];?>
   </div>
   </div>
   <?php 
     }
     $query->closeCursor();
   ?> 
  </div>
</div>

</div>
</section>
</body>
</html>

所以我知道当我点击特定的单选按钮时如何更改表的显示，以及Ajax中的一些帮助提前谢谢你❤️

Answer 1

你只能使用PHP来实现这个目标，但确保用户能够通过Ajax实现这一目标会更好（对你来说，你会了解更多）。

1）首先你需要一个javascript函数，当你单击input[type=radio]时会触发它，例如，如果你单击带有id == radioAlpha的单选按钮，它将使用Ajax请求运行一个函数{ {1}}。如果单击带有vehicule.php?sort=alphabetique的单选按钮，它应该使用Ajax请求运行一个函数id == radioModel - 您可以使用带有Ajax的POST或GET请求发送数据，你喜欢什么。

2）然后，您应该更改vehicule.php?sort=model文件，它还应包含以下内容：

vehicule.php

3）你的档案if ($_GET['sort'] == 'alphabetique') { // run function with sort for alphabetique // echo data with json format for example or even with html } if ($_GET['sort'] == 'models') { // run function with sort for model // echo data with json format for example or even with html } ... ...

tabAffich.php

回到Ajax请求，当它成功通过响应调用时，您可以在<?php while($res = $query->fetch()){ ?> <div id="sorttable"> // Add this line <div class="row"> <div class ="cell"> <?php echo $res['nom'];?> </div> <div class="cell"> <?php echo $res['modele'];?> </div> <div class="cell"> <?php echo $res['km'];?> </div> </div> <?php } $query->closeCursor(); ?> </div>容器中生成新数据。你需要一些javascript的知识，如何清除数据并从ajax响应生成一个新的，但它不是很难学习。

我希望这会帮助你理解如何在这种情况下使用ajax。

有很多方法可以达到你想要达到的效果，我认为我提出的效果非常简单。

使用单选按钮mvc，使用单选按钮设置我的表格的显示

1 个答案: