jQuery中jsonp的使用-CFANZ编程社区

首先来编写一段代码就是利用 Jquery 来请求服务器的数据

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $.ajax({
        url: "http://127.0.0.1/Jquery/22-jsonp.php",
        data: {
            "teacher": "BNTang",
            "age": 34
        },
        success: function (msg) {
            console.log(msg);
        }
    });
</script>
</body>
</html>

22-jsonp.php

<?php
// 0.拿到传递过来的数据
$teacher = $_GET["teacher"];
$age = $_GET["age"];
$arr = array("name" => $teacher, "age" => $age);
$data = json_encode($arr);
?>

利用 idea 打开 index.html 运行结果如下图：

jQuery中jsonp的使用_JS新特性+流行框架

发现产生了跨域，接下来就是这次要介绍了利用 Jquery 使用 jsonp 来解决跨域访问数据问题，可以通过设置一个 dataType 来告诉 Jquery 要使用 jsonp 如下：

dataType: "jsonp",

jQuery中jsonp的使用_回调函数_02

添加了之后然后在访问浏览器发现跨域的错误已经没有了：

jQuery中jsonp的使用_回调函数_03

然后紧接着查看一下我们发送出去的 Ajax 请求，如下图：

jQuery中jsonp的使用_JS新特性+流行框架_04

如上图我框出来的内容就是 Jquery 发送的 jsonp 的请求设置的请求回调函数，我们可以在服务器当中以这个 key 来进行获取然后返回这么一个回调函数回去如下：

修改 22-jsonp.php

<?php
// 0.拿到传递过来的数据
$teacher = $_GET["teacher"];
$age = $_GET["age"];
$arr = array("name" => $teacher, "age" => $age);
$data = json_encode($arr);

// 1.拿到回调函数的名称
$cb = $_GET["callback"];
// 2.返回数据
echo $cb . "($data);";
?>

然后紧接着浏览器再次请求测试结果如下图所示：

jQuery中jsonp的使用_回调函数_05

如果你想让服务器端根据你指定函数名称来进行设置的话，可以通过一个 jsonp 的属性来进行设置，告诉 jQuery 服务器在获取回调函数名称的时候需要用什么 key 来获取：

jsonp: "cb",

jQuery中jsonp的使用_jquery_06

更改服务器 php 代码，我这里不在贴服务 php 文件的名称了更改的内容如下：

<?php
// 0.拿到传递过来的数据
$teacher = $_GET["teacher"];
$age = $_GET["age"];
$arr = array("name" => $teacher, "age" => $age);
$data = json_encode($arr);

// 1.拿到回调函数的名称
$cb = $_GET["cb"];
// 2.返回数据
echo $cb . "(" . $data . ");";
?>