分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

jsonp

发布时间:2023-09-06 01:49责任编辑:苏小强关键词:jsjson

  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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved