zoukankan      html  css  js  c++  java
  • 使用jQuery-AJAX–读取获得跨域JSONP数据的示例

    在项目开发中,如果在同一个域名下就不存在跨域情况,使用$.getJSON()即可实现。但是需要跨域请求其他域名下面的Json数据就需要JSONP的方式去请求,跨域写法和getJSON有差异。如下:

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery-AJAX--读取获得跨域JSONP数据</title>
        <script src="./jquery-1.7.2.js" type="text/javascript"></script>
        <style type="text/css">
            body,html{font-family: "Microsoft Yahei";}
            a{text-decoration: none;}
        </style>
    </head>
    <body>
    <h2><a href="javascript:void(0)" class="btnAJAX">点击AJAX获取数据JSONP跨域....</a></h2>
    <h2><a href="javascript:void(0)" class="btnAJAX">点击AJAX获取数据JSONP跨域....</a></h2>
    <h2><a href="javascript:void(0)" class="btnAJAX">点击AJAX获取数据JSONP跨域....</a></h2>
    <h2><a href="javascript:void(0)" class="btnAJAX">点击AJAX获取数据JSONP跨域....</a></h2>
    <script type="text/javascript">
    $(function() {
        $(".btnAJAX").click(function(){
            $.ajax({
                type : "get",
                async:false,
                url : "http://weather.123.duba.net/static/weather_info/101121301.html",
                dataType : "jsonp",
                jsonp: "callbackparam",             //服务端用于接收callback调用的function名的参数
                jsonpCallback:"weather_callback",   //callback的function名称
                success : function(json){
                //  console.log(json);              //浏览器调试的时候用
                    alert(json.weatherinfo.city);
                    alert(json.weatherinfo.week);
                    alert(json.update_time);
                },
                error:function(){
                    alert('fail');
                }
            });
        });
     
    });
    </script>
     
    </body>
    </html>
     
     
  • 相关阅读:
    JIRA Activity Stream连接到FishEye时路径不对
    职业分析
    Doublechecked locking解析
    Wireshark基本介绍和学习TCP三次握手
    插入排序算法
    Event.observe
    前端开发工程师如何在2013年里提升自己
    addEventListener(转)
    最好的HTML 5编码教程和参考手册分享
    XSRF 的攻击与防范
  • 原文地址:https://www.cnblogs.com/flyerca/p/6113692.html
Copyright © 2011-2022 走看看