Question

我正在创建一个航班搜索页面。第一页上有一个表单，单击提交按钮时，搜索结果将显示在第二页。

这是第一页：http://www.projectmeteor.dx.am/flights.php

请执行以下操作：

选择原产地：古瓦哈提
选择目的地：加尔各答
点击搜索广告

这样的东西应出现在第二页上。

现在我想在点击标题（运算符，离开，...）时对结果进行排序。

我知道我必须使用AJAX。我已经看到了一些使用AJAX对表进行排序的例子，但由于我的表没有使用表格，我无法弄清楚如何开始。

如果您需要，请询问任何代码。

这是第一页（flights.php）：

<div class="col-sm-12">

                <div class="search">

                    <div class="content">

                    <form action="flightSearch.php" method="POST">

                        <div class="radioContainer">

                            <div class="col-sm-6 text-left">

                                <input type="radio" name="flightType" value="One Way" id="oneWay">
                                <label for="oneWay"><span class="radioLeft">One Way</span></label>

                                <input type="radio" name="flightType" value="Return Trip" id="returnTrip" checked>
                                <label for="returnTrip"><span class="radioLeft">Return Trip</span></label>

                            </div>

                            <div class="col-sm-6 text-right">

                                <input type="radio" name="flightClass" value="Business Class" id="businessClass">
                                <label for="businessClass"><span class="radioRight">Business Class</span></label>

                                <input type="radio" name="flightClass" value="Economy Class" id="economyClass" checked>
                                <label for="economyClass"><span class="radioRight">Economy Class</span></label>

                            </div>

                        </div> <!-- radioContainer -->

                        <div class="col-sm-6">          
                        <div class="form-group">
                             <label for="origin">Origin:<p> </p></label>

                                <select id= "origin"  data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Origin" name="origin">
                                    <option value="New Delhi" data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option>
                                    <option value="Mumbai" data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option>
                                    <option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option>
                                    <option value="Bangalore" data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option>
                                    <option value="Chennai" data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option>
                                    <option value="Pune" data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option>
                                    <option value="Goa" data-subtext="GOI" data-tokens="GOI Goa">Goa</option>
                                    <option value="Guwahati" data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option>
                                    <option value="Gandhinagar" data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option>
                                    <option value="Jammu" data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option>
                                    <option value="Bhopal" data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option>
                                    <option value="Agartala" data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option>
                                </select>
                        </div>
                    </div>

                        <div class="col-sm-6">          
                        <div class="form-group">
                             <label for="destination">Destination:<p> </p></label>

                                <select id= "destination"  data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Destination" name="destination">
                                    <option value="New Delhi" data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option>
                                    <option value="Mumbai" data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option>
                                    <option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option>
                                    <option value="Bangalore" data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option>
                                    <option value="Chennai" data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option>
                                    <option value="Pune" data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option>
                                    <option value="Goa" data-subtext="GOI" data-tokens="GOI Goa">Goa</option>
                                    <option value="Guwahati" data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option>
                                    <option value="Gandhinagar" data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option>
                                    <option value="Jammu" data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option>
                                    <option value="Bhopal" data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option>
                                    <option value="Agartala" data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option>
                                </select>
                        </div>
                    </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="datetime1">Select Departure Date:<p> </p></label>
                                <div class="input-group date" id="datetimepicker1">
                                    <input id="datetime1" type="text" class="inputDate form-control" placeholder="Select Departure Date" name="depart"/>
                                    <span class="input-group-addon">
                                    <span class="fa fa-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="datetime2">Select Return Date:<p> </p></label>
                                <div class="input-group date" id="datetimepicker2">
                                        <input  id="datetime2" type="text" class="inputDate form-control" placeholder="Select Return Date" name="return"/>
                                        <span class="input-group-addon">
                                        <span class="fa fa-calendar"></span>
                                </span>
                        </div>
    </div>
</div>

                        <div class="col-sm-3">

                        <label for="adults">No. of adults:<p> </p></label>
                            <div class="form-group">
                                <select id= "adults" class="selectpicker form-control" data-size="5" title="Aged 18 and above" name="adults">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-3">

                        <label for="children">No. of children:<p> </p></label>
                            <div class="form-group">
                                <select id= "children" class="selectpicker form-control" data-size="5" title="Aged upto 17" name="children">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12 text-center">

                            <input type="submit" class="button" name="searchFlights" value="Search Flights">

                        </div>

                    </form>

                    </div> <!-- content -->

                </div> <!-- search -->

            </div>

这是第二页（flight_search.php）：

    <?php include("common/header.php"); ?>

    <?php

        $type=$_POST["flightType"];
        $class=$_POST["flightClass"];
        $origin=$_POST["origin"];
        $destination=$_POST["destination"];
        $depart=$_POST["depart"];
        if($type=="Return Trip") {  //let's store the return value only if the flightType is a Return Trip
            $return=$_POST["return"];
        }
        $adults=$_POST["adults"];
        $children=$_POST["children"];

        if($class=="Economy Class")
            $className="Economy";
        else
            $className="Business";

    ?>

    <div class="spacer">a</div>

    <div class="searchFlights">

        <div class="query">

            <?php echo $type; ?> <?php echo $className; ?> Flights from <?php echo $origin; ?> to <?php echo $destination; ?>       

        </div>


    <?php

        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "projectmeteor";

        // Creating a connection to projectmeteor MySQL database
        $conn = new mysqli($servername, $username, $password, $dbname);

        // Checking if we've successfully connected to the database
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "SELECT * FROM flights WHERE origin='$origin' AND destination='$destination'";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {

    ?>

        <div class="listItemMenuContainer">

            <div class="col-sm-2 text-center">

                <div class="headings">

                    Operator

                </div>

            </div>

            <div class="col-sm-2 text-center">

                <div class="headings">

                    Departs

                </div>

            </div>

            <div class="col-sm-2 text-center">

                <div class="headings">

                    Arrives

                </div>

            </div>

            <div class="col-sm-2 text-center">

                <div class="headings">

                    Fare

                </div>

            </div>

            <div class="col-sm-2 text-center">

                <div class="headings">

                    Ticket Type

                </div>

            </div>

            <div class="col-sm-2 text-center">

                <div class="headings">

                    Seats Available

                </div>

            </div>

        </div> <!-- listItemMenuContainer -->

        <div class="spacerLarge">.</div> <!-- just a dummy class for creating some space -->

    </div> <!-- searchFlights -->

    <?php
            while($row = $result->fetch_assoc()) {

    ?>

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

                        <?php echo $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">

                    <?php echo $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">

                    <?php echo $row["destination"]; ?>

                </div>

            </div>

            <!-- DESTINATION ENDS -->


            <!-- FARE STARTS -->

            <div class="col-sm-2 text-center">

                <div class="values fare">

                    <?php echo $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">

                    <?php echo $row["class"]; ?>

                </div>

            </div>

            <!-- TYPE ENDS -->


            <!-- SEATS AVAILABLE STARTS -->

            <div class="col-sm-2 text-center">

                <div class="values availabilityGreen">

                    <?php echo $row["seats_available"]; ?>

                </div>

                <div class="availabilitySubscript">

                    <input type="submit" class="availabilityBookingButton" value="Book Now">

                </div>

            </div>

            <!-- SEATS AVAILABLE ENDS -->

        </div> <!-- listItem 1 -->

    </div>

    <?php

            }

        } else {

    ?>

    <div class="searchFlights">

        <div class="noFlights">

            No flights found. Please consider modifying your search query.

        </div>

    </div>

    <?php

        }

    ?>

    <?php $conn->close(); //closing the connection to the database ?>

    <div class="spacerLarge">.</div> <!-- just a dummy class for creating some space -->

    <?php include("common/footer.php"); ?>

由于

Answer 1

首先，您需要知道最好使用其中一个不使用ajax的解决方案，因为您将要在ajax中使用的所有请求将要进行新的mysql查询和服务器处理制作HTML。

但是如果你想使用AJAX，我很容易知道怎么做。

1-首先，您需要将jquery.js库添加到您的代码中，如果您没有来源，可以从https://jquery.com/下载

2 - 将标题的代码更改为

<div class="headings" id="order1" data-id="operator"> Operator</div>
<div class="headings" id="order2" data-id="departs"> Departs</div>

另外我认为你需要将所有结果放在一个应该在你的while句子之前的一般div中，并在这个div之后关闭它。这个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 -->

3 - 阅读div order *事件并发送ajax事件

<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 - 最后一步你需要制作应该通过POST发送的orderBy参数进行mysql查询的flightProcesor.php，然后你需要创建一个包含所有代码的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;
?>

编辑：}关闭时间需要在返回之前。 已编辑：所有飞行赞助商已添加PHP代码。

我希望这样的事能助你。

Answer 2

本文可能会帮助您找到正确的解决方案：https://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/

正如以前的帖子所推荐的那样，您应该使用Javascript来执行此操作。你想要的是一个前端功能，你应该使用前端技术。每当有人对表格进行排序时，使用DOM而不是制作AJAX调用和新的SQL请求也会更容易。

Answer 3

如果您已拥有所有数据，则不必使用AJAX，只需对DOM对象进行排序即可。

看看这个：Easiest way to sort DOM nodes
这个：Sort a bunch of DIVs

使用AJAX对MySQL搜索结果进行排序

3 个答案: