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

时间:2016-03-05 12:26:28

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

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

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

一,使用AJAX必须先载jQuery库,这里建议使用例如百度提供的免费CDN加速前端公共库

<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>


本站所有文章均为小宇博客原创,转载请注明来源及出处!

作者:宇天行

本文首发地址:http://www.huceo.com/post/429.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:26 | 浏览:1518

您对本文《如何用AJAX技术请求并解析天行数据》有哪些看法?  ---  【期待您的评论】

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

群贤网2016-03-07 15:48:57回复评论
还不错

站内文章搜索

转播分享好友

网盟广告赞助