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
原文地址:https://www.cnblogs.com/tanhuidong/p/8836148.html