我几个月来一直在为一个家庭成员开发一个网站，并且在过去的一个月里一直停留在过滤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'选择元素，它只显示表中显示的所有'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>
';
} ?>
正如你所看到的，它在模板中使用while循环回显所有行。
最后但并非最不重要的是我有我的表格：
<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元素中的所有make并再次使用while循环来放置每个make在车辆SQL表中。
所以我的问题是......我如何使用AJAX只显示我的SQL表中包含已在表单中选择的'Make'的行？
如果有人可以花一些时间向我展示一个可以使用我的设置的示例，那将是很好的，我只熟悉PHP并且一直在努力了解如何在我的情况下使用AJAX，我只需要一个更新列表的简单方法。
答案 0 :(得分：0)
$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
}
});
答案 1 :(得分：0)
看起来你开始展示一切。因此，您可以考虑仅使用已经显示的内容并隐藏与品牌不匹配的项目，而不是对仅包含所选内容的结果集发出AJAX调用。这只需要在所有div上设置visible=false，其类以“listing-container”开头，但与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();
这样做的好处是你没有做另一个服务器请求。但是，如果你的全套可用车辆变得如此之大，你不希望用户将它全部列在一个页面上（所以你追求分页），你会想要做一个ajax按照您最初的考虑进行查询。
答案 2 :(得分：0)
我认为这与您想要实现的非常相似。在这里查看Add foreach value to Ajax