zoukankan      html  css  js  c++  java
  • jsonp获取json数据

    这两天做微信端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
    其他

    [我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)

    [我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)

    [微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

    [前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

    [微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

    [微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

    [微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

    [微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

    [前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

    [游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

  • 相关阅读:
    React Native ActivityIndicator(菊花组件)
    React Native 自定义ListView 分区表
    React Native 自定义ListView
    React Native ListView数据展示
    React Native ScrollView 添加图片数组
    模仿UC新闻标签编辑功能
    React Native ScrollView缩放
    React Native 之 TextInput(多个语法知识)
    React Native 之 Flexbox(弹性盒子布局)
    React Native 之 Flex
  • 原文地址:https://www.cnblogs.com/linewman/p/9918568.html
Copyright © 2011-2022 走看看