jquery使用json_使用jQuery和JSON制作自己的网站徽章

jquery使用json

Flickr ， Delicious和Twitter之类的服务都提供了可以添加到网站JavaScript徽章或小部件。 但是，如果您已经在自己的网站上使用了JavaScript框架（如jQuery），为什么还要添加更多JavaScript？ 此外，制作自己的东西更有趣。 所有这些服务还提供JSON格式的Feed API，并且滚动自己的小部件很容易。 这是我立即使用jQuery向Twitter推荐的一个。 您会惊讶于它只需要很少的代码。

使用Twitter JSON API所需的只是一个URL：

http://twitter.com/status/user_timeline/sitepointdotcom.json?count=5&callback=yourfunction

用任何Twitter用户名替换sitepointdotcom ，将count=5数字更改为您希望检索的推文数，并将您的函数yourfunction为回调函数的名称，就可以开始了。 将该URL复制到浏览器的地址字段中，即可下载JSON数据以查看：

yourfunction([ ... ]);

输出是对JavaScript函数的调用。 包含JSON对象集合的数组（每个推文一个）作为单个参数传递。 这个想法是您将上面的URL作为源将脚本元素添加到您的网页。 绕过大多数浏览器中存在的Ajax安全限制是必要的，在大多数浏览器中，JavaScript无法对当前域以外的域进行Ajax调用。 但是，可以包含来自另一个域JavaScript源文件。 这是这类徽章工作的标准方式。

但是，我们将使用另一种方法，因为添加另一个脚本标签并确保有一个回调函数对我来说听起来很杂乱。 我们将在jQuery中使用非常方便的getJSON函数。 但是首先，我们需要一些HTML来放置小部件数据：

<div id="tweet">
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

这个想法是，所有Twitter更新都将作为单独的段落元素放入该div元素中。 漂亮又简单。 我也喜欢它，因为如果JavaScript由于某种原因无法运行，则页面上会保留有意义的内容，而不是从未完成的加载动画。

因此，我希望在页面准备就绪后触发此脚本，而在jQuery中执行此操作的最佳方法是使用$(document).ready ：

$(document).ready(function(){
  //our code goes here...
});

所有的getJSON方法需要的只是一个URL。 此功能的好处是，如果您添加查询字符串参数callback=? 在URL的末尾，jQuery将为您处理回调函数：

$(document).ready(function(){
  var tweeturl = "http://twitter.com/status/"
      +"user_timeline/sitepointdotcom.json?count=5"
      +"&callback=?";
  $.getJSON(tweeturl, function(data){
    //read the JSON data here...  
  });
});

jQuery会将JSON数据作为data变量传递给第二个参数中指定的函数。 然后，我们可以使用每种方法遍历所有tweet，并将它们插入到页面HTML中：

$.getJSON(tweeturl, function(data){
  $.each(data, function(i, item) {
    $('<p></p>')
        .addClass(i%2 ? 'even' : 'odd')
        .html(item.text)
        .prependTo('#tweet');
  });
});

如果您去看一下演示 ，您将看到我们现在有一个小部件，可以拉入Twitter数据，将每个tweet转换为HTML段落，并将其插入到页面HTML中。 我们还向推文添加了odd或even的class值，以便我们可以在CSS中实现交替的背景色。 到目前为止，一切都很好，但是缺少什么呢？ 好吧，我认为任何Twitter徽章都必须至少链接@ replies，＃标签和URL。 并添加一些JavaScript正则表达式将为我们很好地完成这项工作：

var txt = item.text.replace(
  /(https?://[-a-z0-9._~:/?#@!$&'()*+,;=%]+)/ig,
  '<a href="$1">$1</a>'
).replace(
  /@+([_A-Za-z0-9-]+)/ig, 
  '<a href="http://twitter.com/$1">@$1</a>'
).replace(
  /#+([_A-Za-z0-9-]+)/ig,
  '<a href="http://search.twitter.com/search?q=$1">
      +'#$1</a>'
);
$('<p></p>')
  .addClass(i%2 ? 'even' : 'odd')
  .html(txt)
  .prependTo('#tweet');

而已！ 去看看成品 。 那有多简单？

可以使用Delicious ， Flickr ， Last.fm甚至Yahoo Pipes采取相同的方法。 还有很多改进的空间。 您可以添加时间信息，链接到tweet URL，添加化身等等。 SitePoint的另一位技术编辑Raena建议，您甚至可以按逆时针顺序将所有这些服务的数据合并在一起，以进行生命流样式的显示。 如果您愿意自己制作，请发表评论并让我知道。

翻译自: https://www.sitepoint.com/make-your-own-web-site-badges-with-jquery-and-json/

jquery使用json