Javascript 如何使用Jquery将搜索值附加到url？

我的应用程序中有一个功能，我会过滤产品列表，用户必须选择一些过滤器并提交。现在，我想要实现的是将这些选定的值附加到url而不刷新它，并且能够基于选定的过滤器获得下面的url示例。多谢各位

我的问题不同，不可能重复

我当前的url是，现在当传递搜索键时，这些搜索键将附加到该url，而不会重新加载页面

http://localhost:3002/new

HTML 滤波器输入 显示选定的过滤器

---

对于操纵URL，您可以使用一个库，如->它是一个非常轻量级的库。当然，为了在url中显示它们而不刷新，您必须知道如何使用浏览器的历史记录，也有一些库可以用于此。有关导航的示例，请参见Mozilla

编辑：

---

正如vijayP在评论中提到的，您也可以查看更多信息。

您使用哪个API来创建rest服务？一种更简洁的方法是将搜索参数作为参数传递，如axios.get'/user'，{params:{ID:12345}}如果您使用axiosI，我在获取http请求时使用ajax，您可以编写JSFIDLE吗？我不知道如何使用fiddle Sirim不确定您是否可以在URL中使用逗号？通常，参数的格式为？key=value&key2=value2&key3=value3等

<div class="search-btn">

                    <button id="searchVechicle" type="button" class="btn btn-primary btn-sm">Search</button>
                  </div>

https://test.com/searchnew.aspx?Year=2020,2019&Model=EcoSport,Edge,Escape,Super%20Duty%20F-350%20SRW&Pricerange=10001-20000,20001-30000

 $('.filter-content input').on('click',function(e){
        var el = $(this);
        var val = el.val();
        var propName = el.data('prop');

        if (!filters[propName])
            filters[propName] = [];

        if(el.prop("checked")){
            filters[propName].push(val);
        }else{
            $.each(filters, function(pname, item){
                if(propName == pname)
                    filters[propName].splice(item.indexOf(val.toString()),1);
            })
        }
        console.log("Filters", filters)

    })

var displaySelectedFilters = function(){

        console.log("Display" , filters)

        var selectedFiltersEl = '', filtersWrapper = $('#selected-filters');
        filtersWrapper.empty();

        $.each(filters, function(pname, f){
            var selectedItem = '', removeLink = '';

            removeLink = '<a href="#" title="Remove ' + pname + ' filter" class="removeFilterProp"> <i class="fas fas- fa-trash-alt"></i></a>';

            $.each(f, function(i, item){
                var removeItem = '<a href="#" data-prop="' +pname+ '" data-item="'+ item +'" title="Remove ' + item + '"> <i class="fas fas- fa-times"></i></a>';

                selectedItem += '<span>' + item + removeItem + '</span>';
            });

            selectedFiltersEl += "<div class='filter-item'>" + pname + ": " + selectedItem + removeLink + "</div>";
        });

        filtersWrapper.prepend(selectedFiltersEl);
    }