本文实现php与javascript简单通信。
方法一
- 不需要调用jqury
- 使用产生script的方式
服务器端：
1
2
3
4
5
6
7
8
9<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>客户端:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://bd72008b-fa6a-4092-b369-2437dec66486.coding.io/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
方法二
- 需要调用jqury,跨域，不能进行同步处理
服务器端
1
2
3
4
5
6
7<?php
$data = array(
"name"=>$_GET['name'],
"age"=>25,
);
echo $_GET['callback']."(".json_encode($data).")"; //相当于：echo 'getName({"name":"小妹子","age":25})';// 必须加前缀哦,是从客户端传过来的方法名
?>客户端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
$.ajax({
url:'https://bd72008b-fa6a-4092-b369-2437dec66486.coding.io/jsonp.php', //跨域到http://www.xiaoqiang2.com，另，http://xiaoqiang.com也算跨域
type:'GET', //jsonp 类型下只能使用GET,不能用POST,使用post提交会造成有些浏览器获取不到返回 例如firebug
dataType:'jsonp', //指定为jsonp类型
data:{"name":"小美人"},//数据参数
jsonp:'callback',//服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值
jsonpCallback:'getName', //回调函数名
success:function(result){ //成功执行处理，对应后台返回的getName(data)方法。
$("#divCustomers").html('你妹子： '+result.name+'的年龄：'+result.age+'');
//myData是一个div自己加就好了
},
error:function(msg){
//执行错误
}
});
</script>
</body>
</html>