JavaScript跨域调用服务器数据--jsonp实现

JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp.php页面

header('Content-type: application/json');

$callback = htmlspecialchars($_REQUEST['callback']);

$jsonData = json_encode(['id' => 1, 'name' => '小猫咪']);

echo $callback . '(' . $jsonData . ')';

exit;

第一种：

<script>

    function callbackFun(result) {

        console.log(result)

    }

</script>

<script src="http://test.com/jsonp.php?callback=callbackFun"></script>

第二种：

$.ajax({

    type: 'get',

    async: false,

    url: "http://test.com/jsonp.php",

    dataType: 'jsonp',

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

    jsonpCallBack: 'callbackFun', // 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

    success: function (res) {

        console.log(res)

    },

    error: function () {

        console.log('fail')

    }

})

加我微信公众号【皮蛋馅儿】，一起学习哦~