Delicious 是一个最好的书签网站,它提供了许多aip 给开发者用来处理书签数据。以下是一个例子使用jquery 来获得给定url 的实际的书签数目。
Delicious API
为了获得书签的数目,可使用一下url:
http://feeds.delicious.com/v2/json/urlinfo/data?url=xxx.com&callback=?
JQuery Ajax
Jquery 有着易于使用和强大的.ajax()或快速的.getJSON()方法来根据需求获取数据。
1 jquery .ajax() 的例子
使用jquery的.ajax()方法来获得json数据从Delicious 网站,然后显示所有的书签数目:
$.ajax({
type: "GET",
dataType: "json",
url: "http://feeds.delicious.com/v2/json/urlinfo/data?url="+url+"&callback=?",
success: function(data){
var count = 0;
if (data.length > 0) {
count = data[0].total_posts;
}
$("#delicious_result").text(count + ' Saved');
}
});
2 jquery .getJSON()例子
.ajax()的速记(shorthand)方法。它们都做同样的任务。
$.getJSON("
http://feeds.delicious.com/v2/json/urlinfo/data?url="+url+"&callback=?",
function(data) {
var count = 0;
if (data.length > 0) {
count = data[0].total_posts;
}
$("#delicious_result").text(count + ' Saved');
});
自我尝试
在一下例子中,在文本框中输入url,点击按钮,然后获得在 Delicious网站标签的数目:
<html>
<head>
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Get Delicious bookmark count with jQuery</h1>
URL : <inputtype='text'id='url'size='50'value='http://www.google.com'/>
<br/><br/>
<h4>Delicious count : <spanid="delicious_result"></span></h4>
<buttonid="delicious">Get Delicious Count (.Ajax)</button>
<buttonid="delicious2">Get Delicious Count (.getJSON)</button>
<scripttype="text/javascript">
$('#delicious').click(function(){
$("#delicious_result").text("Loading......");
var url = $('#url').val();
$.ajax({
type: "GET",
dataType: "json",
url: "http://feeds.delicious.com/v2/json/urlinfo/data?url="+url+"&callback=?",
success: function(data){
var count = 0;
if (data.length > 0) {
count = data[0].total_posts;
}
$("#delicious_result").text(count + ' Saved');
}
});
});
$('#delicious2').click(function(){
$("#delicious_result").text("Loading......");
var url = $('#url').val();
$.getJSON("
http://feeds.delicious.com/v2/json/urlinfo/data?url="+url+"&callback=?",
function(data) {
var count = 0;
if (data.length > 0) {
count = data[0].total_posts;
}
$("#delicious_result").text(count + ' Saved');
});
});
</script>
</body>
</html>
效果: