将history.js与jQuery动态内容一起使用

时间:2017-10-20 16:39:48

标签: javascript php jquery html history.js

我有一家使用动态内容的商店。用户可以单击复选框以查看特定类别的产品。为此,我使用jQuery从另一个PHP文件中获取产品(工作正常)。

shop.php:

<input type="checkbox" class="category_btn" name="cat" id="category-books" value="books">
<input type="checkbox" class="category_btn" name="cat" id="category-dvds" value="dvds">
...    
<div id="allProducts">
   Load dynamic content with jQuery here...
</div>

loadProducts.php:

<?php
$categories = $_POST['categories'];
$productsData = load_products($categories);

for ($i = 0; $i < $amount; $i++) {?>
    <div class="singleproduct">
        <a href="product.php?id=<?php echo $productsData[$i]['ID'] ?>"><img
                    src="images/<?php echo get_image($productsData[$i]['ID']) ?>"
                    alt=""></a>
        <p class="prod-title"><?php echo $productsData[$i]['title'] ?></p>
    </div>
<?php }?>

jQuery代码(shop.php):

<script>
    jQuery(document).ready(function($) {
        var checkedCats = [];
        $(".category_btn:checked").each(function() {
            checkedCats.push($(this).val());
        });

        $(".category_btn").click(function () {
            var arraydata = {"categories[]" : checkedCats};
            $.post('loadProducts.php', arraydata, function (data) {
                var test = $('#allProducts').html(data);
            });
        });
    };
</script>

现在,如果用户点击产品查看详细信息,然后使用后退按钮返回shop.php,他将看到没有动态加载内容的商店主页面。是否可以使用标记的复选框和已加载的产品保存最后一个视图? 我认为history.js是解决方案,但我不知道如何做到这一点。也许有人可以帮忙......

0 个答案:

没有答案