Добавление второго раскрывающегося списка в запрос AJAX для фильтрации данных - PullRequest
0 голосов
/ 23 июня 2019

Я создаю веб-приложение системы обзора. У меня есть страница, на которой я использовал раскрывающееся меню для фильтрации данных с помощью 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>

Div, который отображает результаты AJAX

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

Когда выбран выпадающий список, этот div загружает resposne из 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>

пока еще известно, какое местоположение было выбрано в первом раскрывающемся списке.

Если у кого-нибудь есть какие-либо советы о том, как я мог бы это реализовать, это было бы очень признательно.

1 Ответ

0 голосов
/ 23 июня 2019

Я бы рекомендовал опубликовать все необходимые параметры в рамках одного JSON-запроса на сервере (используя Ajax).

  1. Собрать все значения формы и создать объект.
  2. Преобразовать этот объектв JSON и POST через Ajax на сервер
  3. На стороне сервера: Постройте и выполните динамический SQL-запрос с заданными параметрами.
  4. Визуализация ответа
  5. Клиент выбирает ответ и добавляет новый контент в DOM.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...