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

最新推荐文章于 2022-07-22 10:53:04 发布

luyaran

最新推荐文章于 2022-07-22 10:53:04 发布

阅读量314

点赞数 1

分类专栏：接口类杂谈

杂谈同时被 2 个专栏收录

157 篇文章

订阅专栏

接口类

28 篇文章

订阅专栏

本文介绍如何使用jQuery库实现JSONP跨域请求，包括设置请求方式、回调函数等，并通过两个实例展示了具体的应用场景，如按钮点击触发请求及表单序列化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" id="btn" value="button" />
</form>
</body>
</html>

ajax.js

$(document).ready(function(){
 
    $("#btn").click(function(k)
 {
        //...
        var
j = $("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);
                }else
if (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 
.')';  //返回格式，必需
?>