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

【问题标题】：Set the display of my table with radio button using radio buttons mvc使用单选按钮 mvc 使用单选按钮设置我的表格的显示
【发布时间】：2018-06-16 21:31:26
【问题描述】：

好吧，我在每个网站上都进行了搜索，但没有找到我想要的内容：我会让你更容易，看看我有什么： my page ;)

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

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

我知道我需要使用 Ajax，但我对此绝对不满意。除此之外，我还在 MVC 中编写我的项目。我对 Google、Stack、OpenClassroom 等进行了一些研究。而且我不完全了解我需要在 Ajax 中做什么，或者我需要在哪里添加说明。所以这是我的代码：

controllerBoutique.php（控制器）：

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

boutique.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>

tabAffich.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>

vehicule.php（型号）：

<?php 
 function getVehiculesByAlpha(){
  try{
    $db = new PDO('mysql:host=localhost;dbname=ProjectRentcar;charset=utf8','root','root');
  }catch(Exception $e){
    die('Erreur : '.$e->getMessage());
  }
  $query = $db->query('
    SELECT nom, modele, km 
    FROM Vehicule V, Marque Ma 
    WHERE V.numMarque = Ma.numMarque
    ORDER BY nom, modele');
  return $query;
  }

function getVehiculesByModel(){
  //Same code with order differently
}
function getVehiculesByKm(){
  //Same here
}

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

【问题讨论】：

标签： javascript php jquery ajax radio-button

【解决方案1】：

您可以仅使用 PHP 来实现这一点，但对于 UX 来说，使用 Ajax 来实现这一点肯定会更好（对您来说，您也会学到更多）。

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

2) 然后您应该更改您的 vehicule.php 文件，它还应该包含以下内容：

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
}
...
...

3) 你的文件tabAffich.php

<?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>

回到 Ajax 请求，当它是一个成功的响应调用时，您可以在<div id="sorttable"> 容器中生成新数据。您需要一些 javascript 知识，如何清除数据并从 ajax 响应生成新的响应，但学习起来并不难。

我希望这对您了解如何在这种情况下使用 ajax 有所帮助。

想要达到的效果其实有很多方法，我觉得我介绍的方法很简单。

【讨论】：

谢谢是真的，很简单，我没想过这个解决方案，非常感谢;)