0

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

    <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 或您推荐的任何其他东西 :)

4

1 回答 1

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>
于 2012-12-13T22:17:53.000 回答