通过jsonp获取json数据实现AJAX跨域请求

2020-05-24 21:38:55易采站长站整理


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$.ajax({
type: "get",
async: false,
url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('你的名字:' + json.name + ' 年龄: ' + json.age);

},
error: function(){
alert('fail');
}
});

});
</script>
</head>
<body>

</body>
</html>

type
:请求类型,GET 或 POST,默认为 GET;
async
:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;
url
:发送请求的地址(跨域请求时应为绝对地址);
dataType
:指定服务器返回的数据类型;
jsonpCallback
:自定义JSONP回调函数名称;
success
:请求成功后回调函数;
error
:请求失败时调用此方法。

运行结果:

服务器返回的数据类型:

返回一个指定函数名为

message
的回调函数,函数里面包裹的数据为
JSON
格式。