jsonp 前端和后端的结合

最新推荐文章于 2024-09-29 20:09:59 发布

zhanglong1229

最新推荐文章于 2024-09-29 20:09:59 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js php 文章标签： jsonp ajax 前端

本文链接：https://blog.youkuaiyun.com/zhanglong1229/article/details/41316745

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

php

3 篇文章

订阅专栏

本文通过一个具体的示例详细介绍了 JSONP 的工作原理及其在实现跨域请求中的应用。包括前端 JavaScript 代码如何设置回调函数以及后端 PHP 如何响应此请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp一个熟悉的名字，做为一个不牛逼的前端总是不断的复制别人写的跨域调用，今天终于理解了跨域ajax请求前端和后端的结合了。

本人理解上可能有误，如有错误请忽略

首先稍微理解下jsonp，

jsonp我今天的理解就是浏览器跨域请求返回一个js函数字符串，返回一个有效的可执行的js标签。

上案例

html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>跨域调用</title>
	<script type="text/javascript" src="jquery.mini.js"></script>
	
</head>
<body>
<input type="button" onclick="getTime()" value="跨域按钮">
<script type="text/javascript">
function showJson(data){
	 //result= data;
	 alert(data);
	
}
function getTime(){
		var url = 'http://yichou.com:81/zhang.php?callback=showJson';

		$.ajax({
			url:url,
			dataType:"jsonp",  
			success: function(msg){
				alert(msg.err);
			
			},
			error:function(){
				alert('请求失败');
			}

		});
	}


</script>
</body>
</html>

showJson(data)函数作为 jsonp回调函数必须存在因为后台返回的是一个有效的js函数调用字符串不存在将导致失败

var url = 'http://yichou.com:81/zhang.php?callback=showJson'; 此处跟其他的ajax调用一样是请求的url 注意此处必须传递要一个参数做为jsonp的回调函数就是定义的showJson函数

dataType:"jsonp" 定义为jsonp

其他的参数就不做解释了

php

$data = json_encode(array('err'=>'跨域调用','code'=>'你错了'));
echo $_GET['callback'].'('.$data.')';

此处就可以看到传递的callback的用处

后台返回的就是回调函数即

showJson('{"err":"\u8de8\u57df\u8c03\u7528","code":"\u4f60\u9519\u4e86"}')

返回的是一个有效的可执行的js函数调用的字符串

请求成功 $data 就作为返回的结果可在success中使用

注意事项：

必须要有回调函数，回调函数必须跟后台程序返回函数名称一致本人理解有限希望大家多多指导