Question

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

    <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>

我现在写了一个简单的后端，它支持像http://myhomepage.com?funny=1&popular=1这样的网址，以显示有趣且受欢迎的问题。每个选项都有一个查询参数。服务器检查查询参数并使用适当的集返回更新的@questions变量。视图遍历@questions并逐个显示。

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

我该怎么做呢？对于后端，我使用Sinatra / Ruby，Bootstrap作为UI，我可以使用jQuery或者你推荐的任何其他内容：）

Answer 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>

选择设置查询参数并将页面重新加载为复选框

1 个答案: