jsonp跨域

最新推荐文章于 2025-04-02 23:18:56 发布

原创最新推荐文章于 2025-04-02 23:18:56 发布 · 214 阅读

CC 4.0 BY-SA版权

JSONP

JSON with Padding其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

只能以GET方式请求

注意只能够通过get方法
服务端代码


<?php 

    // echo "alert('天气不错哦')";

    $callBack = $_GET['callback'];



    $arr = array(

        'name' =>'西兰花' ,

        'color' =>'red' 

         );

    echo $callBack."(".json_encode($arr).")";

?>

前端代码:注意,域名不同
- 核心是通过script标签的src属性提交get请求


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function fn(data){

            console.log(data);

        }

    </script>

    <script type="text/javascript" src='http://www.section02.com/seciton02_jsonP.php?callback=fn'></script>

</head>

<body>

    <h1>区域1的页面_jsonP演示</h1>

</body>

</html>

jQuery 的$.ajax()

方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问

jsonp 可以指定服务端接收的参数的“key”值，默认为callback

jsonpCallback 可以指定相应的回调函数，默认自动生成

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="jq发送jsonp" id='jqJsonp'>
</body>
</html>

<script type="text/javascript" src='../js/jquery.min.js'></script>
<script type="text/javascript">

function myJsonPCallBack(data) {
console.log('自己写的回调函数名'+data);
}

// 如果使用jq 发送jsonp 他会自动帮助我们拼接一个callback
// 如果想要设置自己的回调函数可以通过jsonpCallback 来设置自己的名字
// 跟我们自己写的发送ajax相比要更改
/*
dataType:jsonp
如果想要自定义回调的函数名字需要添加
jsonpCallback:指定自己的函数名字
*/
$(function () {
$('#jqJsonp').click(function () {
$.ajax({
url:'03.jq_jsonp.php',
success:function(data){
console.log(data);
},
dataType:'jsonp',
jsonpCallback:"myJsonPCallBack"
})
})
})

</script>

流程图：