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

2024/10/25 22:32:09 来源：https://blog.csdn.net/cdcdhj/article/details/141098670 浏览: 次关键词：jsonp跨域传递数据，前端回调后端的数据进行处理

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");//赋值给textareatext.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)";

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

相关资讯

热文排行

最新新闻

推荐新闻

热搜词