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)";