php+ajax+jsonp

最新推荐文章于 2021-03-25 04:15:14 发布

原创最新推荐文章于 2021-03-25 04:15:14 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #php #jsonp

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用PHP实现跨域访问的方法，包括通过设置HTTP头部允许跨域、利用JSONP进行跨域请求，以及如何指定回调函数处理返回的数据。

1.php自带头允许跨域访问

第一种方法，使用$.ajax()

jsonp.html文件

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>		
		<meta charset="UTF-8"></meta>
	</head>

	<body>
		<script>
			$.ajax({
				url      : "http://jsonp.com/jsonp.php",
				type     : "get",
			}).done(function(data) {
				console.log(data);
			}).fail(function(header) {
				console.log(header);
			});
		</script>
	</body>
</html>

http://jsonp.com/jsonp.php文件

<?php
//允许跨域
header('Access-Control-Allow-Origin: *'); 
$json = array(
    'name' => 'Tom',
    'sex'  => 'man'
);
echo json_encode($json);

结果输出：

{name: 'tom',sex:'man'}

第二种方法，使用$.getJSON()

jsonp.html文件

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>		
		<meta charset="UTF-8"></meta>
	</head>

	<body>
		<script>
			$.getJSON('http://jsonp.com/jsonp.php',function(data) {
				console.log(data);
			});
		</script>
	</body>
</html>

2.php不带头跨域访问，使用jsonp

jsonp.html文件

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>		
		<meta charset="UTF-8"></meta>
	</head>

	<body>
		<script>
			$.ajax({
				url      : "http://jsonp.com/jsonp.php",
				type     : "get",
				dataType : "jsonp",
				jsonp	 : 'callback',
			}).done(function(data) {
				console.log(data);
			}).fail(function(header) {
				console.log(header);
			});
		</script>
	</body>
</html>

http://jsonp.com/jsonp.php文件

$json = array(
    'name' => 'Tom',
    'sex'  => 'man'
);
$callback = $_GET['callback'];
echo $callback."('".json_encode($json)."')";

结果输出：

{name: 'tom',sex:'man'}

3.jsonp也可以指定返回执行某个函数

jsonp.html文件

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>		
		<meta charset="UTF-8"></meta>
	</head>

	<body>
		<script>
			function callbackfunc(data)
			{
			    console.log(data);
			}

			$.ajax({
				url      : "http://jsonp.com/jsonp.php",
				type     : "get",
				dataType : "jsonp",
				jsonp	 : 'callback',
				jsonpCallback: 'callbackfunc',
			}).done(function(data) {
				console.log(data);
			}).fail(function(header) {
				console.log(header);
			});
		</script>
	</body>
</html>

http://jsonp.com/jsonp.php文件

$json = array(
    'name' => 'Tom',
    'sex'  => 'man'
);
$callback = $_GET['callback'];
echo $callback."('".json_encode($json)."')";

结果输出：

{name: 'tom',sex:'man'}