jQuery JSON帮助

好吧我是新来的jQuery和JSON，但我现在已经这样做了，我从JSON格式的数据库中获得了一些信息，现在我想以一种很好的方式显示结果，但我不知道如何;）jQuery JSON帮助

我想要的是在我的页面上显示5个最新的线程，所以这个脚本会尝试加载所有的时间，还是我需要做别的事情？

我想让它显示5个最新的线程，当有萨姆一个新的线程，我应该滑下去了6个线程在底部应该消失

这里是我的代码

<script type="text/javascript"> 
$.getJSON('ajax/forumThreads', function(data) { 
    //$('<p>' + data[0].overskrift + '</p>').appendTo('#updateMe > .overskrift'); 

    $('<div class="overskrift">' + data[0].overskrift + '</div>') { 
     $(this).hide().appendTo('updateMe').slideDown(1000); 
    } 

    //alert(data[0].overskrift); 

}); 
</script>

来源

2011-01-06 kim

喜金，欢迎来到SO！你能否编辑你的问题，要理解你试图达成的目标有点困难。 – karim79 2011-01-06 21:46:33

@ karim79：我想他只是想展示5件事情，并且当从数据源中获取更新的东西时，将它放在列表的顶部，然后将旧的东西滑出。（Ajaxy总是显示最新的五件事） – Thanatos 2011-01-06 21:48:58

是什么你的服务器端对象的结构？比方说你的服务器端对象是这些（C＃）之一：

public class ForumThread 
{ 
    public string Title { get; set; } 
    public string Content { get; set; } 
    public string PostedBy { get; set; } 
}

然后如下您的javascript函数将访问每个属性：

<script type="text/javascript"> 
    $.getJSON(
     'ajax/forumThreads', 
     function(data) { 
      alert(data.Title); 
      alert(data.Content); 
      alert(data.PostedBy); 
     } 
    }); 
</script>

如果你想返回的项目列表，你如下可能有一个容器响应对象：

public class ForumThreadList 
{ 
    public List<ForumThread> Threads { get; set; } 
}

..和您可以按如下访问列表：

<script type="text/javascript"> 
    $.getJSON(
     'ajax/forumThreads', 
     function(data) { 
       for (var i = 0; i < data.Threads.length; i++) { 
        alert(data.Threads[i].Title); 
        alert(data.Threads[i].Content); 
        alert(data.Threads[i].PostedBy); 
       } 
     } 
    }); 
</script>

要添加，你可以尝试这样的一个新项目：

假设你的HTML是：

<body> 
    <div id="threadContainer"> 
     <!-- javascript will add divs like this: 
      <div class='threadItem'>Content!</div> 
     --> 
    </div> 
</body>

您的JavaScript可能是这样的：

<script type="text/javascript"> 
    $.getJSON(
     'ajax/forumThreads', 
     function(data) { 
      for (var i = 0; i < data.Threads.length; i++) { 
       var threadItem = $("<div class='threadItem'>" + data.Threads[i].Title + "</div>"); 
       var existingItemCount = $("#threadContainer > .threadItem").length; 
       if (existingItemCount >= 5) { 
        $("#threadContainer > .threadItem:last").remove(); 
       } 
       if (existingItemCount == 0) { 
        $("#threadContainer").append(threadItem); 
       } 
       else { 
        threadItem.insertBefore($("#threadContainer > .threadItem:first")); 
       } 

      } 
     } 
    }); 
</script>

来源

2011-01-06 21:53:54 Robert

回答

相关问题