БЛОГ НА HUSL


Как реализовать нормальный фильтр Ajax для API?

Автор вопроса: Алина Хром

Есть страница с подгрузкой контента через API Shikimori и есть фильтр. Если выполнить запрос на API :

curl_setopt($an, CURLOPT_URL, "https://shikimori.one/api/animes?page=1&limit=5&order=ranked&kind=tv");

  • Данные подгружаются в div то есть работает пагинатор нормально.

А если запрос будет через фильтр с переменной :

curl_setopt($an, CURLOPT_URL, "https://shikimori.one/api/animes?page=1&limit=5&order=ranked&".$fval."");

  • Он подгружает 5 записей с фильтром kind=tv например, а следующую страницу (контент) - по параметру order=ranked, и ни чего не меняется. Подгрузку брала отсюда Тык.

Как реализовать нормальный фильтр на Ajax или что надо изменить, чтобы это заработало?

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="TEST REST" />
    <link rel="stylesheet" type="text/css" href="../style.css">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<header>

</header>
<!--//-->
<div class="container" style="text-align:center;padding:40px 0 0 0;">
<div id="content" style="width:100%;">

<div class="mainbox" style="max-width: 1383px !important;">
<!-- FILTER -->
<?php include "../filter.php"; ?>
<h3>Список</h3>
<? print_r($filter); ?>
<div id="showmore-list">
    <div class="prod-list">
        <?php include "../load.php"; ?>
    </div>
</div>

<div class="showmore-bottom">
    <a data-page="<?php echo $page; ?>" data-max="<?php echo $amt; ?>" id="showmore-button" href="#">More</a>
</div>

</div>

</div>
</div>
<!--//-->
<footer>
</footer>
<script>
$(function(){
    $('#showmore-button').click(function (){
        var $target = $(this);
        var page = $target.attr('data-page');   
        page++;
 
        $.ajax({ 
            url: '../load.php?page=' + page,  
            dataType: 'html',
            success: function(data){
                $('#showmore-list .prod-list').append(data);
            }
        });
 
        $target.attr('data-page', page);
        if (page ==  $target.attr('data-max')) {
            $target.hide();
        }       
 
        return false;
    });
});
</script>
</body>
</html>

filter.php

<?php
$filter = $_GET["order"];

$filter = $_GET["status"];

$filter = $_GET["kind"];

$filter = $_GET["season"];

?>
<div id="filter-val" data-filter="<?php echo $filter; ?>"></div>

<form id="filter-form" method="GET" action="/animes">
<ul class="checkbox-filter">

<h4>Сортировать по</h4>     
<div class="list-group"> 
  <input type="radio" name="order" value="aired_on" id="order" />
  <label class="list-group-item" for="order">Дате выхода</label>
  </br >
  <input type="radio" name="order" value="ranked" id="order2" checked="checked" />
  <label class="list-group-item" for="order2">Рейтингу</label>
</div>

<h4>Статус</h4>
<div class="list-group2">
  <input type="checkbox" name="status[]" value="anons" id="status"/>
  <label class="list-group-item" for="status">Анонс</label>
  </br >
  <input type="checkbox" name="status[]" value="latest" id="status4" />
  <label class="list-group-item" for="status4">Недавний релиз</label>  
</div>

<h4>Тип</h4>
<div class="list-group3"> 
  <input type="checkbox" name="kind[]" value="tv" id="kind" />
  <label class="list-group-item" for="kind">TV Сериал</label>
  </br >
  <input type="checkbox" name="kind[]" value="movie" id="kind2" />
  <label class="list-group-item" for="kind2">П/ф</label>
  </br >
  <input type="checkbox" name="kind[]" value="music" id="kind3" />
  <label class="list-group-item" for="kind3">Клип</label>
</div>

</ul>
<input type="submit" id="button" />
</form>

load.php

<?php
// Site Settings
$shiki = "https://shikimori.one/api/animes"; // Url SHIKI
$shikimg = "https://shikimori.one"; // Url SHIKIIMG

// Кол-во элементов
$limit = 5;

// Получение записей для текущей страницы
$page = intval(@$_GET['page']);
$page = (empty($page)) ? 1 : $page;             
$start = ($page != 1) ? $page * $limit - $limit : 0;

//Anime
$an = curl_init();
curl_setopt($an, CURLOPT_URL, "".$shiki."?page=".$page."&limit=".$limit."&order=ranked&".$fval."");
curl_setopt($an, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($an, CURLOPT_HEADER, FALSE);
curl_setopt($an, CURLOPT_HTTPHEADER, array("Accept: application/json"));
$response = curl_exec($an);
curl_close($an);
$anime = json_decode($response);

// Кол-во страниц
$total = 0;
 
$amt = ceil(0 / 5);

foreach($anime as $row):
            $newDate = date("M, Y", strtotime($row->aired_on));
            $img = ''. $shikimg .''. $row->image->original .'';
?>
        
        <div class="prod-item">
            <a href="info/?id=<?php echo $row->id ?>">
                <div class="prod-item-img">
                    <img src="<?php echo $img ?>" width="183" height="258" alt="<?php echo $row->name; ?>" title="<?php echo $row->russian; ?>">    
                </div>
                <div class="prod-item-name">
                    <?php echo $row->name; ?>       
                </div>
            </a>
            <span><?php echo $row->kind; ?></span>&nbsp;
            <span><?php echo $newDate; ?></span>
        </div>
<?php endforeach; ?>

Источник

Ответы (2 шт):

Автор решения: Алина Хром

Да все таки я была права, стоило добавить значение фильтра в Ajax GET - теперь работает как часы, сама все сделала и радует.

→ Ссылка
Автор решения: Алина Хром

Надеюсь это кому то в будущем поможет:

На главной тащим url фильтра гет:

anime/index.html

<?php
$url1 = (isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'off')) ? 'https://' : 'http://';
$url1 = $_SERVER['REQUEST_URI'];
echo $url1
?>

Меняем тут же :

<script>
//PAGE BUTTON
$(function(){
    $('#showmore-button').click(function (){
        var $target = $(this);
        var page = $target.attr('data-page');   
        page++;
 
        $.ajax({ 
            type: "GET",
            url: '../animes/load.php<? echo $url1 ?>&page=' + page,  
            dataType: 'html',
            success: function(data){
                $('#showmore-list .prod-list').append(data);
            }
        });
 
        $target.attr('data-page', page);
        if (page ==  $target.attr('data-max')) {
            $target.hide();
        }       
 
        return false;
    });
});
//PAGE BUTTON

</script>

load.php

Меняем структуру запроса:

<?php
// Site Settings
$shiki = "https://shikimori.one/api/animes"; // Url SHIKI
$shikimg = "https://shikimori.one"; // Url SHIKIIMG

// Кол-во элементов
$limit = 10;

// Получение записей для текущей страницы
$page = intval(@$_GET['page']);
$page = (empty($page)) ? 1 : $page;             
$start = ($page != 1) ? $page * $limit - $limit : 0;

$ord = $filter = $_GET["order"] ?? 'ranked';

$stat = $filter = $_GET["status"]  ?? 'anons';

$kin = $filter = $_GET["kind"];

$seas = $filter = $_GET["season"] ?? '2021';

$url1 = (isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on')) ? 'https://' : 'http://';
$url1 = $_SERVER['REQUEST_URI'];
//Anime
$an = curl_init();
curl_setopt($an, CURLOPT_URL, "".$shiki."?page=".$page."&limit=".$limit."&order=".$ord."&status=".$stat."&kind=".$kin."&season=".$seas."");
curl_setopt($an, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($an, CURLOPT_HEADER, FALSE);
curl_setopt($an, CURLOPT_HTTPHEADER, array("Accept: application/json"));
$response = curl_exec($an);
curl_close($an);
$anime = json_decode($response);

// Кол-во страниц
$total = 0;
 
$amt = ceil($total / $limit);

if (is_array($anime) || is_object($anime))
{
foreach($anime as $row):
            $newDate = str_replace(array('1970'), array('Неиз-тно'), date("d M, Y", strtotime($row->aired_on)));
            $img = ''. $shikimg .''. $row->image->original .'';
        ?>
        
        <div class="prod-item">
            <div class="prod-item-name">
                    <?php echo $row->status; ?>     
            </div>
            <a href="#">
                <div class="prod-item-img">
                    <img src="<?php echo $img ?>" width="183" height="258" alt="<?php echo $row->name; ?>" title="<?php echo $row->russian; ?>">    
                </div>
                <div class="prod-item-name">
                    <?php echo $name = $row->russian ?>     
                </div>
            </a>
            <span><?php echo $row->kind; ?></span>&nbsp;
            <span><?php echo $newDate; ?></span>
        </div>
<?php endforeach; ?>
<?php } ?>

Всем удачи!

→ Ссылка

licensed under cc by-sa 3.0 with attribution.