码迷,mamicode.com
首页 > Web开发 > 详细

jsonp

时间:2018-04-14 23:44:16      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:innerhtml   web   div   数据   cisc   body   var   加载   ring   

  jsonp需要在页面中添加一个<script>元素,由该元素来从其他服务器加载json数据。

<body>    
    <script src="js/jsonp.js?callback=showEvents"></script>  //从服务器获取的文件,在URL后面加入想要获取的属性
</body>

  web浏览器本身需要一个处理json的函数

//这个函数专门用来处理json数据的,data是获取的json对象
function
showEvents(data) { var newContent = ‘‘; for (var i = 0; i < data.events.length; i++){ newContent += ‘<div class="date">‘; newContent += ‘<div class="image"><img src="‘ + data.events[i].map +‘"></div>‘; newContent += ‘<p>‘ + data.events[i].location + ‘</p>‘; newContent += ‘<span>‘ + data.events[i].date + ‘</span>‘; newContent += ‘</div>‘; } document.getElementById(‘box‘).innerHTML = newContent; }

  因为数据是用script返回的脚本文件,所以会被视为对象,不需要JSON的parse和stringify方法了。

//<script src="js/jsonp.js?callback=showEvents"></script>传入的文件
showEvents({
    "events"  : [
        {
            "location" : "San Francisco, CA",
            "date" : "May 1",
            "map" : "img/001.jpg"
        },
        {
            "location" : "Austin, TX",
            "date" : "May 15",
            "map" : "img/002.jpg"
        },
        {
            "location" : "New York, NY",
            "date" : "May 30",
            "map" : "img/003.jpg"
        }
    ]
});

 

  

jsonp

标签:innerhtml   web   div   数据   cisc   body   var   加载   ring   

原文地址:https://www.cnblogs.com/tanhuidong/p/8836148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!