gistfile1.htm

<div id="comments"></div>
<div id="pages">
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
</div>

<script type="text/javascript">
$('.page').click(function(e){
  // 內容改成風火輪，看起來像在讀取中...
  $('#comments').html('<img src="/images/spinner.gif" alt="">');
  var page = parseInt($(this).html(), 10);
  $.getJSON('/comments/list', {start: (page-1)*5, count: 5}, 
    function(data, status) {
      var comment = new Array();
      for (var i in data) {
        var item = data[i];
        comment.push('<div class="comment">');
        comment.push('<div class="author">' + item.name + '</div>');
        comment.push('<div class="comment">' + item.comment + '</div>');
        comment.push('</div>');
      }
      $('#comments').html(comment.join(''));
    }
  );

});
</script>