Question

我真的很感激这方面的一些帮助。我有一个页面，使用laravel分页显示商店中的产品。我根据品牌，类别和可用产品在页面上设置了过滤器。过滤产品我使用复选框。如果选中了复选框，则使用ajax get request并通过URL将状态发送到控制器以过滤可用产品。

status = 1适用于所有产品，status = 0适用于所有产品.Url如下所示：

/Collections/Newest_Items?status=1&page=2

情况如下。我想知道是否可以更改URL中的变量值并动态重新生成页码和新过滤器的URL？这是使用jquery获取页面的URL并更改值然后使用window.history.pushState("", "", URL);更改URL的方法吗？这是我的ajax：

       $(document).on('click', "#only_available", function () {

                if ($('#only_available').is(':checked')) {
                    var status = 1;
                    url = '/Collections/Newest_Items?status='+status;
                } else {
                    var status = 0;
                    url = '/Collections/Newest_Items';
                }

                window.history.pushState("", "", url);

                $.ajax({
                    url: '/Collections/Newest_Items',
                    type: "GET",
                    data: {status: status},
                    cash: false,
                    success:
                        function (response) {
                            $('#products-load').html(response);
                        }

                });
            });
        });

我是通过自己编写URL来实现的。在这种情况下，我必须在应用于页面的每个过滤器后写入URL。这样我就无法获得用户当前所在的页面并返回第一页。但我想在这里实现的是，我想用当前用户的页码动态创建Url并应用所有过滤器。

Answer 1

您可以使用window.location.search，例如：status=1&page=2。然后，您需要解析这些变量以获取您正在寻找的页码。

Answer 2

好的，我想我明白你的要求。因此，对于您要触发的每个唯一过滤器事件，您需要在pushstate之前查询当前网址，并使用类似的内容获取值。

例如，如果有人点击了Brand，那么你会得到新的brand变量以及当前的status和page变量以及像这样的ajax传递

也只是发布它而不是GET

$(document).on('click', ".brand", function () {
    var brand = $(this).attr('id);

    //Example how to use it: 
    var params = parseQueryString();
    var status = params["status"]);
    var page = params["page"]);
    // if you have more variables than this then you would add them here and make sure you pass them along to the ajax data.

    url = '/Collections/Newest_Items?status='+status+'&page='+page+'&brand='+brand;

    window.history.pushState("", "", url);

    $.ajax({
        url: '/Collections/Newest_Items',
        type: "POST",
        data: {status: status, page: page, brand: brand},
        cash: false,
        success:
            function (response) {
                $('#products-load').html(response);
            }
    });
});

var parseQueryString = function() {

    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};

Answer 3

到@CesarBielich和@Sokies我终于设法解决了这个问题。他们给了我一部分答案，但不是全部。我把它作为我的问题的独特之处：

我们需要的是路径和嵌套在URL中的参数。因此，为了获取路径的路径，我们必须使用window.location.pathname并且要获取所有参数必须使用window.location.search。在那之后，我们必须结合路径和参数，以便URL出来。那么我们必须在那之后添加像status这样的新参数。这样控制器就可以访问所有参数。旧的params和新的params。通过这种方式，laravel分页知道要在href中链接到其他页面的内容。

        $(document).on('click', "#only_available", function () {

                if ($('#only_available').is(':checked')) {
                    var status = 1;
                } else {
                    var status = 0;
                }

                var params = window.location.search;
                var path = window.location.pathname;

                var old_url = path+params;
               var url = old_url+'&status=' + status;

                window.history.pushState("", "", url);

                $.ajax({
                    url: url,
                    type: "GET",
                    cash: false,
                    success:
                        function (response) {
                            $('#products-load').html(response);
                        }

                });
            });
        });

在url

3 个答案: