新浪滚动新闻API javascript解析

阿星 · 发表于 2015-11-12 12:47:37

这是新浪的滚动新闻API
http://roll.news.sina.com.cn/interface/rollnews_ch_out_interface.php

可以浏览器直接访问
下面是使用javascript解析，对ul、li、span、a标签做了下简单的处理
效果：http://xn--9krq6qlpqj42a.com/news.html
注意，编码是GBK。要保证文件的编码格式也是GBK。
下面是代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>梦殇国际 - 新闻</title>
<style type="text/css">
li {white-space:nowrap;margin:0 10px 10px 0;float:left;list-style-type: none;}
span {font-size: 14px;line-height: 30px;float: left;padding: 5px;border-radius: 10px;display: block;box-shadow: 2px 3px #ccc;background: #4e4e4e;}
a{color:#fff;text-decoration:none;}
</style>
</head>
<body>
<div>
<ul id="news_ul">
<li>
<span>
<a href="https://www.714.hk/">正在加载中...</a>
</span>
</li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
//解析数据新浪滚动新闻:http://roll.news.sina.com.cn/interface/rollnews_ch_out_interface.php
jQuery.getScript("http://roll.news.sina.com.cn/interface/rollnews_ch_out_interface.php", function(){
var news=jsonData.list;
var list="";
var hisen=0;
$.each(jsonData.list,function(i,n){
list+="<li><span><a href='"+ n.url+"' target='_balnk'>"+ n.title+"</a></span></li>";
hisen++;
//控制显示条数
if(hisen >= 40){
return false;
}
});
$("#news_ul").html(list);
});
});
</script>
</body>
</html>