如何用AJAX技术请求并解析天行数据

栏目分类:帮助教程 发布时间:2016-03-19 阅读次数:1737

经过有人问天行数据能不能用AJAX获取,答案当然是没问题的,首先简单解释下什么是AJAX技术,AJAX是一种基于javascript的创建交互式网页应用的开发技术,最主要的目的是通过与后端通信进行网页的异步更新,也就是说在AJAX可以在网页无需重新刷新的情况下更新部分内容,极大提高了网页的交互体验。



使用AJAX请求数据,涉及到跨域请求时会出现"ajax请求不被接受。已阻止跨源请求"的提示,在HTML5中有个更为简便的解决方法,只需在返回的header响应头加上“Access-Control-Allow-Origin: *”即可,*即表示允许所有的跨域通信请求。支持IE10以上及其他例如WebKit内核等浏览器,如果有兼容IE的考虑则需使用JSONP跨域请求。


一,使用AJAX必须先加载jQuery库:

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>


二,GET请求天行数据并循环遍历解析JSON的示例代码:

<script>
$(document).ready(function(){ 
$('#button').click(function(){ 
$.ajax({ 
type:"GET", 
    url:"http://api.tianapi.com/wxnew/?key=您的key&num=5&rand=1", 
    dataType:"json", 
success:function(data){ 
    var txapi="<ul>"; 
for(var i=0; i<5; i++) 
{
    txapi+="<li><img src='"+data["newslist"][i]["picUrl"]+"' width='80' height='50' /><a href='"+data["newslist"][i]["url"]+"' title='"+data["newslist"][i]["description"]+"'>"+data["newslist"][i]["title"]+"</a></li>"; 
}
    txapi+="</ul>"; 
$('#result').append(txapi); 
} 
}); 
return false; 
}); 
}); 
</script>


三,绑定一个按钮实现点击获取,效果如上图:

<div id="one"><p>AJAX获取JSON数据</p>
<input class="button" type="button" id="button" value="点击确定" /> 
</div> 
<div id="result"></div>


另外,天行数据还增加了重置APIKEY密匙功能,登录个人中心点击“重置密钥”即可。


其他推荐OTHER API 更多>

开通会员专享福利
工单 客服