dongyong2906 2018-01-20 09:31
浏览 51
已采纳

在url中的ajax请求之后捕获和更新变量值

I would really appreciate some help on this. I have a page that shows products in a store using laravel pagination. I have filters on the page based on brands, category, and available products. for filtering the products I am using a checkbox. if a checkbox is checked I use ajax get request and send status via URL to a controller to filter available products.

status = 1 is for available products, and status = 0 is for all products.Url is looks like this:

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

Here is the situation. I want to know if is it possible to change the variable value in URL and regenerate the URL base on the page number and new filters dynamically? Is it a way to get the URL of the page using jquery and change the values and then change the Url with window.history.pushState("", "", URL);? Here is my 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);
                        }

                });
            });
        });

I do this by writing the URL by myself. In this situation, I must write the URL after every filter applied to the page. this way I cant get the page the user currently in and it goes back to the first page. But what I want to achieve here is, I want to make the Url dynamically with page number the user currently on with all filters applied to it.

  • 写回答

3条回答 默认 最新

  • douzhang8840 2018-01-20 12:53
    关注

    tnx to @CesarBielich and @Sokies I finally manage to solve the problem. they give me part of the answer but not all.I made it unique to my question:

    what we need here is the path and the parameters that nested in URL. so for getting the path of the route, we must use window.location.pathname and for getting all the parameters must use window.location.search. after that, we must combine the path and params so that the URL comes out of it. then we must add the new parameter like status after that. So that all the parameters can be accessed by the controller. both the old params and the new one. this way laravel pagination knows what url to make, in the href links to other pages.

            $(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);
                            }
    
                    });
                });
            });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 matlab计算中误差
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊