jsonp跨域传递数据，前端回调后端的数据进行处理

cdcdhj

于 2024-08-11 00:25:25 发布

阅读量292

点赞数 3

分类专栏： javascript学习日记 php学习笔记文章标签：前端

本文链接：https://blog.csdn.net/cdcdhj/article/details/141098670

版权

javascript学习日记同时被 2 个专栏收录

144 篇文章 0 订阅

订阅专栏

php学习笔记

78 篇文章 0 订阅

订阅专栏

jsonp格式包含两个部分：回调和数据；
回调：是在页面接收到响应之后应该调用的函数
数据：作为参数传给回调函数的JSON数据
这里的前端http://127.0.0.1:5500/jsonp.html
后端：http://xuejs.xyz/jsonp.php

//jsonp.html

<html>
    <head>
        <meta http-equiv="content-Type" content="text/html;charset=UTF-8"/>

        <title>
            测试JSONP回调函数
        </title>
    </head>
    <body>
        <div id="data">
            <input id="btn" type="button" value="获取数据"/>
            <textarea id="text" style="width: 400px;height: 100px;"></textarea>
        </div>
        <script type="text/javascript">
        //这个是回调函数，data就是回调时的json数据
            function handleResponse(data)
            {
            //将后端的data数据转化为JSON格式
                let result=JSON.stringify(data);
                //然后再转换成对象格式，看你是需要那种格式
                let res=JSON.parse(result);
                console.log(res);
                let text=document.getElementById("text");
                //赋值给textarea
                text.value=result;
            }
            let btn=document.getElementById("btn");
            //按钮事件
            btn.addEventListener('click',function(){
            //创建script元素，实现跨域传递数据必须是script或img元素
                let script=document.createElement('script');
                script.src="http://xuejs.xyz/jsonp.php?callback=handleResponse";
                document.head.appendChild(script);
                
            });
        </script>
    </body>
</html>

//jsonp.php

$arr=array('a'=>'javascript','b'=>'php','c'=>'nodejs');
$result=json_encode($arr);
//."()"点是连接括号形成函数执行的形式，相当于前端的headleResponse($result)被执行
echo $_GET['callback']."($result)";