用 jQuery.getJSON() 跨域请求 JSON 数据

时间:2023-03-10 01:36:17
用 jQuery.getJSON() 跨域请求 JSON 数据

$.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求。

先说在同一域名下,js发送数据到php,php返回JSON数据:

$.getJSON('save.php',$('#forms').serialize(),function(result){
alert(result.name);
})

save.php:

echo json_encode(array('name' => 'Jason', 'gender' => 'Male', 'location' => 'SZ'));
//输出:{"name":"Jason","gender":"Male","location":"SZ"}

jQuery会直接解析返回的JSON数据,alert出name。

但是如果请求其他域名的数据(这里有说几种跨域的情况,没有一一测试),把函数里的url改成 http://xxx.xxxxxx.xxx/save.php,就没这么简单,用同样的代码没反应。

查了很多发现需要在url后面加上?callback=?,即传递一个callback参数,jQuery会把?替换成函数名称(具体原因没有深入研究),可以抓包看一下函数名为

用 jQuery.getJSON() 跨域请求 JSON 数据

相应的,服务端返回的数据应该改为

echo $_GET['callback'] . '(' . json_encode(array('name' => 'Jason', 'gender' => 'Male', 'location' => 'SZ')) . ')';
//输出:jQuery16409719707807525992_1388128688468({"name":"Jason","gender":"Male","location":"SZ"})

这样,前端JS就可以正常解析JSON数据了。