html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
</head>
<body>
<h1>ajax跨域加载</h1>
<ul>
</ul>
<button>click</button>
<script type="text/javascript" src="js/jQuery.v1.11.1.min.js"></script>
<script type="text/javascript" src="js/demo2.js"></script>
</body>
</html>
js：
var url='http://127.0.0.1/ajaxCrossDomain/php/jsonp.php';
// 跨域请求
$('button').on('click',function(){
$.ajax({
method :'get', //POST", "GET ", "PUT" 1.9版本之前应该用 type
url :url,
dataType:'jsonp',//text， html， xml， json，jsonp，和 script.
cache :true,
async :true,
data:'data',
jsonp: 'callback',
jsonpCallback: 'flightHandler',
password:'ued',
username:'ued',
contentType :"application/x-www-form-urlencoded; charset=UTF-8", //application/x-www-form-urlencoded, multipart/form-data,text/plain
timeout:2000,
beforeSend :function(){
},
success:function(data, textStatus, jqXHR){
$.each(data,function(name,value){
$('<li>'+name+':'+value+'</li>').appendTo('.js-ul-list');
});
},
error:function(data, textStatus, jqXHR){
},
complete :function(data, textStatus, jqXHR){
}
}).done(function(data, textStatus, jqXHR){ // replace .success()
console.log("success")
}).fail(function(jqXHR, textStatus, errorThrown) { // replace .error()
console.log("error")
}).always(function(data, textStatus, jqXHR) { // replace .complete()
console.log("complete");
}).then(function(data, textStatus, jqXHR) { // .done() 和 .fail()
}, function(jqXHR, textStatus, errorThrown) {
});
});
php:
<?php
// 获取callback
$callback = $_GET["callback"];
// json 路径
$filename = "../json/data.json";
// 获取内容file_get_contents();
$json_string = file_get_contents($filename);
// json_decode() 转换为对象stdClass， 第二个参数为true 转化成 array
$result= json_decode($json_string,true);
// 给数组增加一个参数 $callback
$result['callback']=$callback;
// 变成json 个数数据
$result = json_encode($result);
// 三种输入形式
//echo $callback.'('.$result.')'; (一)
//echo "flightHandler($result)"; （二）
echo "$callback($result)"; // (三)
?>
JSONP原理优缺点(只能GET不支持POST)
dataType : "jsonp", // 指定类型 jsonp: "callback", // 回调函数的接收 callback= jsonpCallback & jsonpCallback:"jsonpCallback" // 回调函数的名称
-
« 上一篇：
vim 常用快捷键速查
-
php创建数组的方法
：下一篇 »