AJAX：显示不同的SQL查询

Question

我一直在为一个家庭成员开发一个站点，现在和过去一个月都停留在过滤SQL结果的站点的功能上。

这里是我工作的页面：http://www.drivencarsales.co.uk/used-cars.php

我只是试图让我的用户筛选PHP +页面与表单页面左边的右边列出MySQL的结果。

因此，这里是我的当前设置：

我连接到包含所有使用这个PHP网站上的车辆数据的数据库和表：

<?php 
try { 
    $db = new PDO("mysql:host=localhost;dbname=","",""); 
    $db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 
    $db->exec("SET NAMES 'utf8'"); 
} catch (Exception $e) { 
    echo "Could not connect to the database."; 
    exit; 
} 
?> 
I then have another file that includes all of my SQL queries: 
<?php 
include('database.php'); 
try { 
    $results = $db->query("SELECT Make, Model, Colour, FuelType, Year, Mileage, Bodytype, Doors, Variant, EngineSize, Price, Transmission, PictureRefs, ServiceHistory, PreviousOwners, Options, FourWheelDrive FROM import ORDER BY Make ASC"); 
} catch (Exception $e) { 
    echo "Error."; 
    exit; 
} 

try { 
    $filterres = $db->query("SELECT DISTINCT Make FROM import ORDER BY Make ASC"); 
} catch (Exception $e) { 
    echo "Error."; 
    exit; 
} 
?> 

第一个查询用于当所有行显示在表中时列出结果。

第二个查询用于表单中'Make'select元素，它只是显示所有显示在表中的'Make'，并且不显示重复。

我再有HTML和PHP的是回声的结果块：

<?php include('db-affinity/filter.php'); ?> 
     <div class="col-md-8 col-sm-8 col-lg-8"> 
     <?php while($row = $results->fetch(PDO::FETCH_ASSOC)) 
     { 
     echo ' 
     <div class="listing-container ' . $row["Make"] . '"> 
      <a href="carpage.php"><h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3></a> 
      <h3 class="price-listing">£'.number_format($row['Price']).'</h3> 
     </div> 
     <div class="listing-container-spec"> 
     <img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/> 
      <div class="ul-listing-container"> 
      <ul class="overwrite-btstrp-ul"> 
       <li class="diesel-svg list-svg">'.$row["FuelType"].'</li> 
       <li class="saloon-svg list-svg">'.$row["Bodytype"].'</li> 
       <li class="gear-svg list-svg">'.$row["Transmission"].'</li> 
       <li class="color-svg list-svg">'.$row["Colour"].'</li> 
      </ul> 
      </div> 
      <ul class="overwrite-btstrp-ul other-specs-ul h4-style"> 
      <li>Mileage: '.number_format($row["Mileage"]).'</li> 
      <li>Engine size: '.$row["EngineSize"].'cc</li> 
      </ul> 
      <button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked 
      </button> 
      <button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details 
      </button> 
      <button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive 
      </button> 
      <h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4> 
     </div> 
      '; 
     } ?> 

正如你可以看到它呼应的在所有使用的模板，而环行。

最后但并非最不重要的，我有我的形式：

<div class="container con-col-listing"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-4"> 
     <form class="car-finder-container dflt-container"> 
     <h2 class="h2-finder">Car finder</h2> 
     <ul class="toggle-view"> 
      <li class="li-toggle"> 
      <h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4> 
      <div class="panel"> 
      <select class="form-control select-box"> 
       <option value="make-any">Make (Any)</option> 
       <?php while($make = $filterres->fetch(PDO::FETCH_ASSOC)) 
       { 
       echo ' 
       <option value="'. $make["Make"].'">'.$make["Make"].'</option> 
       '; 
       } ?> 
      </select> 
      <select class="form-control last-select select-box"> 
       <option value="model-any">Model (Any)</option> 
       <option value="two">Two</option> 
       <option value="three">Three</option> 
       <option value="four">Four</option> 
       <option value="five">Five</option> 
      </select> 
      </div> 
      </li> 
      <li class="li-toggle"> 
      <h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4> 
      <div class="panel"> 
      <input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="four-by-four-checkbox" class="label-checkbox">4x4</label> 
      <input id="convertible-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="convertible-checkbox" class="label-checkbox">Convertible</label> 
      <input id="coupe-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="coupe-checkbox" class="label-checkbox">Coupe</label> 
      </div> 
      </li> 
      <li class="li-toggle"> 
      <h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4> 
      <div class="panel"> 
      <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="automatic-checkbox" class="label-checkbox">Automatic</label> 
      <input id="manual-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="manual-checkbox" class="label-checkbox">Manual</label> 
      <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label> 
      </div> 
      </li> 
     </ul> 
     <button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars 
     </button> 
     <h4 class="h4-finder"><a href="#">Try our Smart Search </a><span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4> 
     </form> 
     </div> 

你只需要看看表格的顶部，其余的是不相关的，它基本上利用代码块2的查询显示所有的东西都放到select元素中，并再次使用while循环将每个make放入车辆SQL表中。

因此，直到我的问题......我如何使用AJAX来显示我的SQL表中包含已在我的表单中选择的'生成'的行？

如果任何人可以花一些时间向我展示一个能够与我的设置一起工作的例子，那将是非常好的，我只对PHP很熟悉，一直在努力理解如何在我的情况下使用AJAX，我只需要一个很好的简单方法来更新列表。

Answer 1

$make = $_POST['make']; //or $_GET if that's how you roll 
$query = " 
    SELECT make, model, etc. 
    FROM myTable 
    WHERE make = '$make' 
"; 

这将只显示make所选的结果。您可以使用POST ed HTML表单中的值重复其他选择过滤器。 AJAX呼叫可能看起来像

$.ajax({ 
    type: "POST", 
    url: "path/to/php/script", 
    data: $('#myForm').serialize(), 
    dataType: "JSON", 
    success: function(resp) { 
     var response = JSON.parse(resp); 
     //code to output to table goes here 
    } 
}); 

Answer 2

它看起来像你开始显示的一切。因此，您可以考虑只使用您已经显示的内容，并隐藏与该内容不匹配的项目，而不是针对仅包含所选内容的结果集发出AJAX调用。这只需要在所有以“listing-container”开头的div上设置visible=false，但不匹配make的确切值，可能是“listing-container AUDI”。

事情是这样的：

// display only Audi makes 
var myContainers = $("div[class^='listing-container ']").not(".listing-container.AUDI"); 
myContainers.hide(); 
myContainers.next(".listing-container-spec").hide(); 

这样做的好处是你不这样做的另一台服务器的请求。但是，如果你的整套可用车辆变得如此庞大，你不想让用户把它全部列在一个页面上（所以你追求分页），你会想要做一个阿贾克斯您最初考虑的查询。

Answer 3

我认为这与您想要达到的效果非常相似。在这里检查它Add foreach value to Ajax