php jsonp跨域请求

最新推荐文章于 2024-05-16 22:24:47 发布

dychen1026

最新推荐文章于 2024-05-16 22:24:47 发布

阅读量1.3k

点赞数

分类专栏： js+jquery+css+html前端技巧

本文链接：https://blog.csdn.net/cdy102688/article/details/35027103

版权

js+jquery+css+html前端技巧专栏收录该内容

13 篇文章 0 订阅

订阅专栏

背景：前端铁哥们要个跨域请求的东东，记得在以前的公司中做过这个，记得关键字$.getJSON做的，但是具体的代码，以前没有记录下来。晚上找了下，调了一下，发现可以用的特记录下来，方便下次忘了的话，可以快速找到。

前端 testjsonp.html 代码：

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js"></script>
<script>
(function() {
	$.getJSON('http://192.168.1.136:8010/testJsonp.php?&callback=?',function (data) {
		console.log(data);
		alert(data.status);
	});
})();
</script>

服务器端testJsonp.php代码：

<?php
$data = array("status"=>1,"msg"=>"成功");
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit;

最后，浏览器打开testjsonp.htm l结果如下图

备注：testJsonp.php存放的位置是局域网内的，所以ip外网不能用，也就刷掉了。

总结：

1.前台的 testjsonp.html 里发送的请求里带callback参数的时候，getJSON会自动转成jsonp方式

2.前台的 testjsonp.html 里发送的请求里将callback参数的值设为问号 "?" 时，请求提交出去的时候是会自动生成一个值的，例如截图红色框括起的区域，所以在服务器端的testJsonp.php 代码里获取callback 参数是能够得到和前端匹配的值的。

3.服务器端的testJsonp.php 输出的结果作为 jsonp的返回值时，是必须以 $callback.'('.json_encode($data).')'; 这种形式的。

补充：

铁哥们用了一个 $.getScript 的形式，能请求到一个json文件里的内容。

(function() {
	$.getScript("http://192.168.1.136:8010/jquery/test/Json/data-jsonp.json?callback=?", function(data) {
        console.log(data);
        /* console.log(textStartus);
        console.log(jqxhr); */

        /* var json = $.parseJSON(data.replace(/^\(|\)$/g, ""));
        console.log(json[0].name); */
    });
})();

关于这种个人理解的是应该直接将文件的内容全部跨域读取出来了，换成了上面的php请求的地址的时候，报错了 Uncaught SyntaxError: Unexpected token ? 。查看发送的请求时，看到callback 参数的值也并没有自动生成，仍旧是等于问号 "?"。感觉问题应该是出在这里，目前不知道怎么解决。

由此可得到结论：第一种的方式，是可以满足跨域调用接口；第二种的方式，是可以满足跨域读取一些json格式的js配置文件内容的。