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

来源：互联网发布：淘宝怎么符合分期付款编辑：程序博客网时间：2024/05/10 12:22

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" id="btn" value="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

<?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 .')';  //返回格式，必需
?>

1 0