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

【问题标题】：Adding a second drop-down to AJAX request for data filtering向 AJAX 请求添加第二个下拉列表以进行数据过滤
【发布时间】：2019-06-23 15:48:30
【问题描述】：

我正在构建一个评论系统 Web 应用程序。我有一个页面，我使用下拉菜单使用 ajax 过滤数据。这段代码如下：

index.php（查看）

选择数据库中每个不同位置生成的下拉列表

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

显示 AJAX 结果的 Div

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

当下拉选择时，这个 div 会从 AJAX 加载响应

AJAX 脚本

此脚本获取下拉列表的选定选项，并将其传递给应用程序控制器中的 index/getretreat。控制器使用应用程序模型中名为 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)（模型）

/**
 * 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;

    }   

}

然后将这些数据发送到索引页面上的 div：

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

这一切都按我的意愿工作，我真正苦苦挣扎的是我将如何实施另一个选择菜单来过滤同一组数据。目前使用的选择用于查找位置按选定的下拉值。我正在尝试添加另一个选择菜单来按顺序对数据进行排序，例如：

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

虽然仍然知道在第一个下拉菜单中选择了哪个位置。

如果有人对我如何实现这一点有任何建议，我们将不胜感激。

【问题讨论】：

标签： php ajax

【解决方案1】：

我建议在单个 JSON 请求中将所有必需参数发布到服务器（使用 Ajax）。

收集所有表单值并创建一个对象。
将此对象转换为 JSON 并通过 Ajax 将其 POST 到服务器
在服务器端：使用给定参数构建并执行动态 SQL 查询。
呈现响应
客户端获取响应并将新内容附加到 DOM。

【讨论】：