百度apistore开发实例

API:应用程序接口。接口就好比一个媒介工具，比如你买东西要计算总价，你可以用算盘，计算器，手机或者电脑进行计算得出结果，但是你不必知道这些工具他们的设计原理是什么，你只需要拿来用就可以了。接口也与此类似，接口都是很多具有各自功能的实现，你需要用到它的功能你就可以调用，如果你想要自己设计某个功能你也可以自己设计编写。
API在网站上的应用可以分为数据获取与查询，最简单的例子就是天气预报，打开百度apistore，里面有很多类似于这样的接口，接口是有了，但如何应用到我们的网站呢？你只需一个key（相当于身份证一样的东西），加上你想返回的那些数据来制定相关的关键字（有的需要，有的不需要，），比如下面这个案例：

（图片内容及时更新，无需手工添加）
看看效果有点像网页采集器一样，其实他是通过api这个接口来完成的，我们可以登录官网查看具体内容，天行数据http://api.huceo.com/，百度apistore也有，但是接口设置已经换了，所以大家都以官网上的为主。
下面我们来看具体开发步骤：
1、登录官网，申请您的key。
2、搭建本地php环境，新建一个php文件写上如下代码：

<?php
header("Content-Type: text/html; charset=utf-8");  //设置文件编码
$callback = $_GET['callback'];   
$num = 16; //返回数量
$url = 'http://api.huceo.com/meinv/?key=d6575372114e750002027892aa7e853c&num='.$num.'&rand';  //API接口，key是您申请的key
$ch = curl_init();  
$timeout = 5;
curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$res = curl_exec($ch);
$res = json_decode($res);
$rs=$res->{'newslist'};
$rs=json_encode($rs);
print_r($callback.'('.$rs.')');//返回结果集
?>

3、新建一个html页面，js代码如下

<script type=text/javascript>
jQuery(document).ready(function(){
    $.ajax({
        type:"get",
        async:false,
        contentType: "application/json", 
        url:"meinv.php",
        dataType:"jsonp",//为了防止跨域导致的js失效
        jsonp:"callback",
        success:function(data){
            var html=""; 
            $.each(data,function(idx,item){
                $("#brand-waterfall").find(".item:eq("+idx+")").find("img").attr("src",item.picUrl);
                $("#brand-waterfall").find(".item:eq("+idx+")").find("a").attr("href",item.url);
                $("#brand-waterfall").find(".item:eq("+idx+")").find("h3").text(item.title);
                $("#brand-waterfall").find(".item:eq("+idx+")").find("p").html(item.description);
            });
            }
     })
    $('.boxgrid.caption').hover(function(){
        $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'165px'},{queue:false,duration:160});
    });
})
</script>

html代码如下：

<div class="brand-list" id="brand-waterfall">
<!--需要多少图片就添加多少 -->
    <div class="item">
    <div class="boxgrid caption">
    <a href="#"><img src="images/28.png"/></a>
    <div class="cover boxcaption">
    <a href="#"><h3>标题</h3></a>
    <p>描述</p>
    </div>
    </div>
    </div>
</div>

核心的代码就这些，其他就是些页面美化、排版，怎么好看怎么来，为了方便大家学习交流，请下载本项目完整版，链接: http://pan.baidu.com/s/1slQRtpF 密码: 5adw，或者加入我们QQ群366753767
转载于：http://tool.52miui.com/rjjc/wyzz/1432.html