jQuery JSON help
okay I'm new to jQuery and JSON but I have now done so I got some information from开发者_运维百科 the database in JSON format and now I want to show the results in a nice way but I don't know how ;)
what I want is to show 5 newest threads on my page so will this script try to load all the time or do I need to do something else?
I want it to show the 5 newest threads and when there somes a new thread i should slide down and the 6 threads at the bottom should disappear
Here is my code
<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>
What is the structure of your server side object? Lets say your server side object is one of these (c#):
public class ForumThread
{
public string Title { get; set; }
public string Content { get; set; }
public string PostedBy { get; set; }
}
Then your javascript function would access each property as follows:
<script type="text/javascript">
$.getJSON(
'ajax/forumThreads',
function(data) {
alert(data.Title);
alert(data.Content);
alert(data.PostedBy);
}
});
</script>
If you wanted to return a list of items, you might have a container response object as follows:
public class ForumThreadList
{
public List<ForumThread> Threads { get; set; }
}
..and you would access the list as follows:
<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>
To add a new item you might try something like this:
Assuming your html is:
<body>
<div id="threadContainer">
<!-- javascript will add divs like this:
<div class='threadItem'>Content!</div>
-->
</div>
</body>
Your javascript might be like this:
<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>
加载中,请稍侯......
精彩评论