PHP AJAX JSONP实现跨域请求使用实例

在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”。有兴趣的童鞋可以看看

今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索

实例1

test.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<script src="jquery-1.5.2.min.js"></script>

<script src="ajax.js"></script>

</head>

<body>

</body>

</html>

ajax.js

$.ajax({

type : "post",

url : "ajax.php",

dataType : "jsonp",

jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

success : function(json){

alert('success');

},

error:function(){

alert('fail');

}

});

ajax.php

<?php

$data = ".......";

$callback = $_GET['callback'];

echo $callback.'('.json_encode($data).')';

exit;

?>

jquery-1.5.2.min.js

自己上网下载

当使用jsonp时,使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

实例2

test.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<script src="jquery-1.5.2.min.js"></script>

<script src="ajax.js"></script>

</head>

<body>

<form name="form">

<input type="text" name="sex">

<input type="text" name="age">

<input type="button" ;

$tmp= json_encode($date); //json 数据

echo $callback . '(' . $tmp .')'; //返回格式,必需

?>

jquery-1.5.2.min.js

在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”。有兴趣的童鞋可以看看

今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索

实例1

test.html

1

2

3

4

5

6

7

8

9

10

11

12

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>test</title>

<scriptsrc="jquery-1.5.2.min.js"></script>

<scriptsrc="ajax.js"></script>

</head>

<body>

</body>

</html>

ajax.js

1

2

3

4

5

6

7

8

9

10

11

12

13

$.ajax({

type :"post",

url :"ajax.php",

dataType :"jsonp",

jsonp:"callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

success :function(json){

alert('success');

},

error:function(){

alert('fail');

}

});

ajax.php

1

2

3

4

5

6

7

8

<?php

$data=".......";

$callback=$_GET['callback'];

echo$callback.'('.json_encode($data).')';

exit;

?>

jquery-1.5.2.min.js

自己上网下载

当使用jsonp时,使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。


实例2

test.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>test</title>

<scriptsrc="jquery-1.5.2.min.js"></script>

<scriptsrc="ajax.js"></script>

</head>

<body>

<formname="form">

<inputtype="text" name="sex">

<inputtype="text" name="age">

<inputtype="button" />

</form>

</body>

</html>

ajax.js

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

$(document).ready(function(){

$("#btn").click(function(k) {

//...

varj = $("form").serializeArray();//序列化name/value

$.ajax({

type:'GET',//这里用GET

url:'ajax.php',

dataType:'jsonp',//类型

data: j,

jsonp:'callback',//jsonp回调参数,必需

async:false,

success:function(result) {//返回的json数据

alert(result.message);//回调输出

result = result || {};

if(result.msg=='err'){

alert(result.info);

}elseif(result.msg=="ok"){

alert('提交成功');

}else{

alert('提交失败');

}

},

timeout: 3000

})

//...

});

});

ajax.php

1

2

3

4

5

6

7

8

<?php

$callback= isset($_GET['callback']) ? trim($_GET['callback']) :'';//jsonp回调参数,必需

$date=array("age"=>$_GET['age'],"message"=>$_GET['age']);

$date["msg"]="err";

$date["info"]="因人品问题,发送失败";

$tmp= json_encode($date);//json 数据

echo$callback.'('.$tmp.')';//返回格式,必需

?>

jquery-1.5.2.min.js