jQuery中通过JSONP来跨域获取数据的三种方式

第一种方法是在ajax函数中设置dataType为'jsonp'

$.ajax({

        dataType: 'jsonp',

        url: 'http://www.a.com/user?id=123',

        success: function(data){

                //处理data数据

        }

});

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){

        //处理data数据

});

第三种方法是使用getScript方法

//此时也可以在函数外定义foo方法

function foo(data){

        //处理data数据

}

$.getScript('http://www.a.com/user?id=123&callback=foo');

实例演练：

index.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jsonp</title>

<script src="http://xvpindex.qiniudn.com/Static/Plugins/jquery/jquery-1.8.0.min.js"></script>

<script>

    $.ajax({

        type : "post",

        url : "http://www.topjui.com/jsonp.php?name=zhaoxiace&age=30",

        dataType : "jsonp",

        jsonp: "callbackParam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)

        jsonpCallback:"callbackFunction",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

        success : function(data){

            console.log(data.statusCode + "/" + data.message + "/" + data.name + "/" + data.age);

        },

        error:function(){

            alert('请求失败');

        }

    });

</script>

</head>

jsonp.php

<?

$data["age"] = $_GET['age'];

$data["name"] = $_GET['name'];

$data["statusCode"]="200";

$data["message"]="成功";

$tmp= json_encode($data); //json数据

echo $callback . '(' . $tmp .')';  //返回格式，必需

?>

秒客网

jQuery中通过JSONP来跨域获取数据的三种方式

相关文章