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