jsonp获取json数据

Rattenking

发布于 2021-01-29 15:53:07

2.4K00

代码可运行

运行总次数：0

代码可运行

这两天做微信端JS接口，当时遇到的第一个问题就是权限验证的参数请求，当你请求access_token等的时候，就会存在跨域问题：然后在网上查了，采用ajax的jsonp进行跨域请求，后来报错了，返回的结果错误。然后认真看了一下文档，发现ajax的jsonp返回的数据是callback(json),卡到这里。最后同时为了安全的考虑，我就将这一部分的权限验证参数在后端做，然后前端请求，这样就避免了跨域，同时将安全考虑进去了。

完成微信JS接口后，我返回来思考这个问题，还是希望找到一种方法，实现跨域请求json数据，不改变后端接口。最后在showbo的帮助下找到了解决办法，这里非常感谢showbo。

yahoo提供的jsonp代理：http://query.yahooapis.com/v1/public/yql

直接上代码：

json：

<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        dataType: 'jsonp',
        data: {
            q: "select * from json where url=\"http://www.w3dev.cn/json.asp\"",
            format: "json"
        },
        success: function (d) {
           alert(JSON.stringify(d))//远程json数据放在query.results下
        }
    });

</script>

HTML：

<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        dataType: 'jsonp',
        data: {
            q: "select * from html where url=\"http://www.w3dev.cn/eg/base64.aspx\"",
            format: "xml"
        },
        success: function (d) {
           alert(JSON.stringify(d))//跨域html代码放在results下，注意和json的区别
        }
    });
</script>

注意：如果在请求的时候带有参数，为了安全考虑，这种请求最好放在后端。

参考：http://www.w3dev.cn/article/20130228/JSONP-crossdomain-online-httpproxy-api.aspx

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/06/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

json