设置查询参数并在选中复选框时重新加载页面答案

【问题标题】：Setting query parameters and reloading the page as checkboxes are selected设置查询参数并在选中复选框时重新加载页面
【发布时间】：2013-01-04 01:16:02
【问题描述】：

我的主页上有一组复选框（目前不执行任何操作）：

    <ul class="nav nav-list">
      <li class="nav-header">Questions</li>
      <li><label class="checkbox"> <input type="checkbox"> All </label></li>
      <li><label class="checkbox"> <input type="checkbox"> Funny </label></li>
      <li><label class="checkbox"> <input type="checkbox"> Popular </label></li>
      <li><label class="checkbox"> <input type="checkbox"> Helpful </label></li>
    </ul>

我现在编写了一个简单的后端，它支持以下 URL：http://myhomepage.com?funny=1&popular=1，以显示既有趣又流行的问题，例如。每个选项都有一个查询参数。服务器检查查询参数并返回一个更新的@questions 变量，并带有适当的集合。视图遍历@questions并一一显示。

这是我的目标：当用户选择复选框（例如有趣和流行）时，我希望主页调用服务器（AJAX？）以更新页面上显示的一组问题以匹配用户的选择（理想情况下显示微调器）因为东西正在加载）。我可以使用 jQuery 或其他任何东西。

我该怎么做呢？对于后端，我使用 Sinatra / Ruby，UI 使用 Bootstrap，我可以使用 jQuery 或您推荐的任何其他东西 :)

【问题讨论】：

所以您只是缺少用于 ajax 触发/处理的 js 代码？对示例 URL 上的请求的响应是什么样的？
hm，正如我上面提到的：myhomepage.com?funny=1&popular=1 将显示既有趣又流行的问题，例如。这有帮助吗？不确定这是否是您要寻找的东西！
我的意思是响应会有什么结构——它是一个 JSON 编码的对象，还是只是一个 HTML sn-p？你能在你的帖子中提供一个示例回复吗？更好的是，您能否提供构建响应的后端代码？
这可以使用jQuery.ajax方法来实现。
另外，我没有看到提交触发器 - 是什么告诉浏览器用户已完成选择，因此它应该向服务器提交下一批问题？

标签： jquery ruby ajax twitter-bootstrap sinatra

【解决方案1】：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<ul class="nav nav-list">
      <li class="nav-header">Questions</li>
      <li><label class="checkbox"> <input type="checkbox"> All </label></li>
      <li><label class="checkbox"> <input type="checkbox"> Funny </label></li>
      <li><label class="checkbox"> <input type="checkbox"> Popular </label></li>
      <li><label class="checkbox"> <input type="checkbox"> Helpful </label></li>
    </ul>

    <div id="result"></div>

<script>

$(function(){
var Url;
$("input[type='checkbox']").click(function(){
    Url = 'http://myhomepage.com?';
    $.each($("input[type='checkbox']"),function(){

    if(this.checked)
    {
        var html = $.trim($(this).parent().html().replace('<input type="checkbox"> ',''));
        Url = Url + html + "=1&";
    }

    });
    console.log(Url);
    $.ajax({
      url: Url,
      success: function(data) {
        $('#result').html(data);
         alert('Load was performed.');
      }
    });

});

});
</script>
</body>
</html>

【讨论】：

这太棒了！但是，当取消选择复选框时呢？现在通过那个工作......