首先來編寫一段代碼就是利用 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 來解決跨域訪問數據問題，可以通過設置一個 dataType 來告訴 Jquery 要使用 jsonp 如下：
dataType: "jsonp",
添加了之后然后在訪問瀏覽器發現跨域的錯誤已經沒有了：
然后緊接着查看一下我們發送出去的 Ajax 請求，如下圖：
如上圖我框出來的內容就是 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);";
?>
然后緊接着瀏覽器再次請求測試結果如下圖所示：
如果你想讓服務器端根據你指定函數名稱來進行設置的話，可以通過一個 jsonp 的屬性來進行設置，告訴 jQuery 服務器在獲取回調函數名稱的時候需要用什么 key 來獲取：
jsonp: "cb",
更改服務器 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 . ");";
?>
測試方式還是同上，如果你想要你發送給服務器的回調函數名稱為你自己指定的名稱可以通過一個，jsonpCallback 的屬性來進行指定，也就是告訴 jQuery 服務器在獲取回調函數名稱的時候回調函數的名稱是什么：
jsonpCallback: "BNTang",
瀏覽器請求效果如下圖所示：
