说明

  半年前最早发了一个微博快手热搜榜api源码，但是离最终的展示在页面中还是有一定的距离，本文以微博热榜接口为例，使用AJAX 也就是异步 JavaScript 和 XML，即用JavaScript执行异步网络请求获取接口的数据并在前端展示出来。

以下步骤都是搭建好自己的api情况下，且页面使用jQuery的ajax之前需要先引入jQuery库，原文地址

html部分

展示部分设置一个有序列表，并分别给一个id进行赋值

<ol id="desc">
    <li id="description1">加载中</li>
    <li id="description2">加载中</li>
</ol>

js部分

<script type="text/javascript">
    $(function() {
                                        $.ajax({
                                            url: 'https://xx.cn/wb.php', 
                                    //      请求接口
                                            success: function(res) {
                                                if(res && res) {
                                                    $('#description1').html(res.Top_1);
                                                        $('#description2').html(res.Top_2);
                                                    //  html部分展示的元素
                                                    return;
                                                }
                                            },
                                            complete:function(){
                                       console.log('获取成功');
                                     //  获取完成则打印成功
                                    }, error: function() {
                                                    $('#desc').html('<p style="color:red;">获取失败，请检查接口！</p>');
                                    //          获取失败则进行提示
                                            }
                           });
          });
</script>

  若自己引用的api，在不同的域名上会提示报错：已拦截跨源请求：同源策略禁止读取位于xxx程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'），解决办法直接在接口后添加header("Access-Control-Allow-Origin:*");允许所有网址都可以给我发送Ajax请求即可

分享到：