本地虛擬兩個域名，分別為：www.test.com、www.abc.com
http://www.test.com/index.html頁面點擊按鈕，請求返回www.abc.com域名目錄下的文件的數據，其代碼為：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSONP跨域請求</title>
<script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".button").on("click",function(){
$.ajax({
type:"get",
url:"http://www.abc.com/json.php",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"success_jsonpCallback",
success:function(json){
$(".user").html("用戶信息："+json.username+","+json.age+","+json.gender);
},
error:function(){
alert("請求出錯！");
}
});
});
});
</script>
</head>
<body>
<button class="button">點擊獲取數據</button>
<div class="user"></div>
</body>
</html>
http://www.abc.com/json.php文件代碼為：
<?php
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); echo json_encode($arr); ?>
在Chrome瀏覽器調試會發現報錯了，如圖：
在Chrome瀏覽器調試會發現報錯了，如圖：
json.php返回的數據確實是json類型的數據 {"username":"jack","age":21,"gender":"male"} ，問題處在哪？
翻看了一下Jquery文檔發現jsonp:"callback", jsonpCallback:"success_jsonpCallback",傳遞這兩個參數是有原因的，jsonp的返回數據格式應該是: “客戶端傳遞的回調方法名稱(json數據)”，將php文件改為：
<?php
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); echo $_GET['callback']."(".json_encode($arr).")"; ?>
測試，正確返回結果