添加第二个下拉列表以进行数据过滤的AJAX请求

Question

I'm building a review system web application. I have a page on which I have used a drop-down menu to filter data using ajax. This code is below:

index.php (View)

Select drop-down generated by each different location in the database

<select name="retreat_locations" onchange="filterRetreats(this.value)">
    <option value="alllocations" selected="selected">All Locations</option>
    <?php foreach ($this->locations as $location) {?>
        <option value="<?=htmlentities($location->retreat_location);?>"><?=htmlentities($location->retreat_location);?> </option>
    <?php }?>
</select>

Div which displays AJAX results

<div id="display-retreats">
</div>

When drop-down selection is made, this div loads the resposne from AJAX

The AJAX Script

This script gets the selected option of the dropdown, and passes it to index/getretreat in the controller of the application. The controller uses a method in the model of the application named getRetreatsByFilter($retreat_location).

<!-- AJAX.. -->
<script>
    function filterRetreats(str) {
    if (str == "") {
        document.getElementById("display-retreats").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("display-retreats").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "index/getretreat/" + str, true);
        xmlhttp.send();
    }
}

getRetreatsByFilter($retreat_location) (Model)

/**
 * Get retreats AJAX request for sure with dropdown filter.
 * @return array an array with several objects (the results)
 * Ordered by most reviewed.
 */
public static function getRetreatsByFilter($retreat_loation)
{

    $param = $retreat_loation;

    $database = DatabaseFactory::getFactory()->getConnection();

    if($param == "alllocations") {

    $sql = "SELECT retreats.retreat_id,
                    AVG(review_total_rating) AS retreat_total_rating,
                    AVG(review_cost) AS total_review_cost, 
                    retreat_logo,
                    retreat_name,
                    retreat_website,
                    retreat_facebook,
                    retreat_instagram,
                    retreat_verified,
                    retreat_location,
                    retreat_founded_in,
                    retreat_approved,
                    count(reviews.retreat_id) as retreat_number_of_reviews
            FROM retreats
            LEFT JOIN reviews
            ON retreats.retreat_id = reviews.retreat_id
            WHERE retreat_approved = 1
            GROUP BY retreats.retreat_id
            ORDER BY count(reviews.retreat_id) DESC";

    $query = $database->prepare($sql);
    $query->execute();

    $results = $query->fetchAll();

    return $results;

    }
    else {

    $sql = "SELECT retreats.retreat_id,
                    AVG(review_total_rating) AS retreat_total_rating,
                    AVG(review_cost) AS total_review_cost, 
                    retreat_logo,
                    retreat_name,
                    retreat_website,
                    retreat_facebook,
                    retreat_instagram,
                    retreat_verified,
                    retreat_location,
                    retreat_founded_in,
                    retreat_approved,
                    count(reviews.retreat_id) as retreat_number_of_reviews
            FROM retreats
            LEFT JOIN reviews
            ON retreats.retreat_id = reviews.retreat_id
            WHERE retreat_approved = 1
            AND retreat_location = '".$retreat_loation."'
            GROUP BY retreats.retreat_id
            ORDER BY count(reviews.retreat_id) DESC";

            $query = $database->prepare($sql);
            $query->execute();

            $results = $query->fetchAll();

            return $results;

    }   

}

This data is then sent to the div on the index page:

<div id="display-retreats">
</div>

This all works as I want it to, the thing that I am really struggling with is how would I go about implementation ANOTHER select menu to filter the same set of data.. The select used at the moment is used to find location by selected drop-down value. I am trying to add another select menu to sort the data in order such as:

<label>Sort by:</label>
<select>
    <option>Age</option>
    <option>Rating</option>
    <option>Cost</option>
</select>

whilst still knowing which location was selected in the first drop-down.

If anyone has any advice on how I could implement this it would be thoroughly appreciated.

Answer 1

I would recommend posting all required parameters within a single JSON request to the server (using Ajax).

1. Collect all form values and create an object.
2. Convert this object to JSON and POST it via Ajax to the server
3. On the server-side: Build and execute a dynamic SQL query with the given parameters.
4. Render the response
5. The client fetches the response and appends the new content to the DOM.