首先,您需要知道的是,最好使用一种不使用ajax的解决方案,因为您将在ajax中使用的所有请求都将进行新的mysql查询和服务器处理,以生成html。
1-首先需要添加jquery。如果你没有源代码,你可以从
https://jquery.com/
2-将标题代码更改为
<div class="headings" id="order1" data-id="operator"> Operator</div>
<div class="headings" id="order2" data-id="departs"> Departs</div>
此外,我认为您需要将所有结果放在一个普通div中,该div应该位于while语句之前,并在}之后关闭。这个div应该包含所有结果div。当您使用ajax更新页面时,您将把这个div内容替换为flightProcesor提供的新内容。php返回。
<div id="results"> <!-- NEW TAG -->
<?php
while($row = $result->fetch_assoc())
{
?>
<div class="searchFlights">
<div class="listItem">
.....
</div>
</div><?php
}?>
</div> <!-- NEW TAG -->
<script language="javascript">
$("div[id*=order]").on('click', function ()
{
var column = $(this).attr('data-id');
var oneWay = $('#oneWay').val();
var returnTrip = $('#returnTrip').val();
.....
.....
$.ajax({
type:'POST',
url:"/flightProcesor.php",
data: {orderBy: column, oneWay: oneWay, returnTrip: returnTrip},
success:function(data) {
if(data)
{
$('#results').html(data);
}
}
});
});
</script>
4-最后一步你需要做flightProcesor。php应该使用您通过POST to order发送的orderBy参数进行mysql查询,然后您需要创建一个php$html var,其中包含要返回的所有代码:
<?php
if ($result->num_rows > 0)
{
$string_var = ""; //INIT STRING VAR.
while($row = $result->fetch_assoc())
{
$string_var .= '<div class="searchFlights">
<div class="listItem">
<!-- FLIGHT INFO STARTS -->
<div class="col-sm-2 text-center">
<div class="col-sm-4 text-center">
<div class="operatorLogo text-center"><img src="images/flights/operatorLogos/indigo.jpg"></div>
</div>
<div class="col-sm-8 text-center">
<div class="values flightOperator">IndiGo</div>
<div class="flightNoSubscript">'.$row["flight_no"].'</div>
</div>
</div>
<!-- FLIGHT INFO ENDS -->
<!-- DEPARTS STARTS -->
<div class="col-sm-2 text-center">
<div class="values departs">13:25</div>
<div class="departsSubscript">'.$row["origin"].'</div>
</div>
<!-- DEPARTS ENDS -->
<!-- DESTINATION STARTS -->
<div class="col-sm-2 text-center">
<div class="values arrives">15:49</div>
<div class="arrivesSubscript">'.$row["destination"].'</div>
</div>
<!-- DESTINATION ENDS -->
<!-- FARE STARTS -->
<div class="col-sm-2 text-center">
<div class="values fare">'.$row["fare"].'</div>
<div class="fareSubscript">incl. of GST</div>
</div>
<!-- FARE ENDS -->
<!-- TYPE STARTS -->
<div class="col-sm-2 text-center">
<div class="values type">Refundable</div>
<div class="typeSubscript">'.$row["class"].'</div>
</div>
<!-- TYPE ENDS -->
<!-- SEATS AVAILABLE STARTS -->
<div class="col-sm-2 text-center">
<div class="values availabilityGreen">'.$row["seats_available"].'</div>
<div class="availabilitySubscript"><input type="submit" class="availabilityBookingButton" value="Book Now"></div> <!-- MAYBE YOU NEED AN IDENTIFICATION VALUE FOR EACH ROW IN THIS SUBMIT -->
</div>
<!-- SEATS AVAILABLE ENDS -->
</div> <!-- listItem 1 -->
</div>';
}
}
else
{
$string_var = '<div class="searchFlights">
<div class="noFlights">No flights found. Please consider modifying your search query.</div>
</div>';
}
return $string_var;
?>
