使用jQuery-AJAX–读取获得跨域JSONP数据的示例

最新推荐文章于 2020-10-04 16:25:40 发布

转载最新推荐文章于 2020-10-04 16:25:40 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flyerca/p/6113692.html

文章标签：

#javascript #json #ViewUI

本文介绍如何使用jQuery AJAX实现跨域JSONP数据请求。通过一个具体示例展示了设置请求类型、URL、回调参数及处理成功和失败响应的方法。

在项目开发中，如果在同一个域名下就不存在跨域情况，使用$.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>