jsonp

Posted 2020-10-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp相关的知识，希望对你有一定的参考价值。

　　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的主要内容，如果未能解决你的问题，请参考以下文章