Question

我正在构建一个评论系统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 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>

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

如果有人对我的实施方法有任何建议，将不胜感激。

Answer 1

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

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

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

1 个答案: