3

我有一个过滤器和一个产品列表（id、name、creation_date）。

我可以按 id、name 或 creation_date 过滤。通过 AJAX 请求，我更新了一个内容 div……但显然 URL 没有改变。

如何将参数附加到 URL？例如：

localhost:3000/dashboard/catalog?name=radio&?date_creation=23-06-2013

我知道 history.pushState(html5) 存在...但我需要我的应用程序可以在 IE9 等 html4 浏览器中运行。

我尝试了 Wiselinks ( https://github.com/igor-alexandrov/wiselinks ) 它使用 History.js 但它不使用 AJAX 请求。

有任何想法吗？

谢谢

4

3 回答 3

0

您正在执行一些 AJAX 调用方式，您必须在单选按钮更改时调用了 AJAX 部分

所以我假设，您已经使用单选按钮完成了它，单选按钮名称是“choose_product”

您可以在视图中添加一个隐藏字段，您可以在其中存储当前日期。

<div id='parentDiv'>
 <%= hidden_field_tag 'current_date', Time.now.strftime('%d-%m-%Y') %>
 Your radio button code
</div>

在 javascript 中添加以下代码。这只是一个示例，不完整的解决方案。

$(document).ready(function(){
 var showProducts = function(){
  $("#parentDiv").on('click', "input[name='choose_product']", function(){
   var ajax_url = 'localhost:3000/dashboard/catalog';
   var url_param = '';

   switch($(this).val()){
    case 'creation_date':
     var param_date = $('#current_date').val();
     url_param = '?name=radio&date_creation=' + param_date;     
     break;
    case 'name':
     // Your code goes here
    default:
     //Your code goes here
   }

   // Here you will get the modified url dynamically
   ajax_url += url_param

   $.ajax({
    url: ajax_url,
    // your code goes here
   }); 
  });
 }

 showProducts();
});
于 2013-06-25T13:59:32.750 回答
0

很多时间过去了，但它可能是有用的。代码也已更新，因此如果您有多个 ajax\remote 链接，您将能够合并多个 url 的参数。基于 user1364684 的答案，这用于组合网址。

# change ".someClassA" or "pagination" to the a link of the ajax elemen
$(document).on('click', '.someClassA a, .pagination a', function(){
    var this_params = this.href.split('?')[1], ueryParameters = {},
        queryString = location.search.substring(1), re = /([^&=]+)=([^&]*)/g, m;

    queryString = queryString + '&' + this_params;

    #Creates a map with the query string parameters
    while m = re.exec(queryString)
        queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

    url = window.location.href.split('?')[0] + "?" + $.param(queryParameters);

    $.getScript(url);
    history.pushState(null, "", url);

    return false;
});

# make back button work 
$(window).on("popstate", function(){
    $.getScript(location.href);
});
于 2016-08-23T15:23:28.820 回答