跨域getJson遇到的问题

在项目中遇到的这个问题.跨域要注意的两点:(1)必须是get方式;(2)必须是json格式.

跨域直接用的jquery的getJson,那么后台返回的数据必须是json格式,同时,在url添加callback参数:

例:

$.getJSON('http://www.baidu.com?jsonpCallback=?',function(data){

});


用$.ajax()例子:

$.ajax({

url:'http://ext.event.guagua.cn/1/webDanceFighting/getPrizeList',
type:"get",
dataType:"jsonp", 
jsonp:"jsonpCallback", 

success: function(data){

}
});


用google浏览器调试发现改接口:





服务器返回数据:

jQuery17207754015033133328_1393899140726({"Name":"loogn","Age":23})

返回的字符串就是一个调用一个叫“jQuery17207754015033133328_1393899140726” 的函数,参数是{"Name":"loogn","Age":23}。

其实这个很长的函数名是请求路径中callback=?的作用,我想应该是这样的:$.getJSON方法生成一个对回调方法的引用的名字,换掉?。上面请求会变成

http://localhost:2589/a.ashx?callback= jQuery17207754015033133328_1393899140726&_=1393899141057,所以服务器回返json时要处理一下,如:

 

     string cb = context.Request[ " callback "];
    context.Response.Write(cb +  " ( " + json +  " ) ");

 

参数名callback也可换成jsoncallback,我想是怕冲突吧,jsoncallback应该优先检测,没有再检测callback(没测试!!)

?也可是具体的函数名,这样回调函数就不能是匿名的了,用?生成只是jQuery为我们的一般操作提供的一个便利。



API中介绍:

dataType:"jsonp", //"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
jsonp:"jsonpCallback", //
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。



但是按照上面方法而且后台返回是json数据的前提下,浏览器仍然报错:


什么原因呢???

具体参照:http://bbs.csdn.net/topics/390416751

总之:一般写法

<?php
header("content-type:text/json;charset=utf-8");
header("Cache-Control: no-cache, must-revalidate");
$username='{"name":"老邹","age":1984}'; 
echo $username;
?>

但是:jsonp需要一个调用来触发你传入getjson的那个函数,而触发就靠你传入的一个callback参数,这个参数值实际上就是一个特殊函数名,你返回的必须是一段JS代码,才能够触发它,也就是类似
callack_12324343({'hello':'world'});
因此你上面的echo $username;改成

echo "{$_GET['callback']}({$username});";

才算符合jsonp的要求...



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax是一种用于在网页上进行异步通信的技术,可以通过发送HTTP请求来获取数据或更新页面内容。然而,由于同源策略的限制,我们通常无法直接在网页上通过Ajax请求跨域的资源,包括本地的JSON文件。 跨域请求本地的JSON文件并不常见,因为同源策略主要用于防止恶意行为和安全问题。但是有时我们可能遇到需要跨域请求本地JSON文件的情况,例如在开发过程中需要模拟服务器返回的数据。 要实现跨域请求本地的JSON文件,可以通过以下几种方式: 1. JSONP(JSON with Padding) JSONP是一种通过动态创建<script>标签,实现跨域访问的方法。在本地JSON文件中,我们可以通过在JSON数据外面包裹一个函数调用来返回数据。 例如,在本地JSON文件中添加如下代码: ```javascript jsonpCallback({"name": "John", "age": 25}); ``` 然后在网页上使用Ajax请求: ```javascript function jsonpCallback(data) { console.log(data); } var script = document.createElement('script'); script.src = 'local.json?callback=jsonpCallback'; document.body.appendChild(script); ``` 这样就可以通过JSONP方式跨域请求并获取本地的JSON数据。 2. CORS(Cross-Origin Resource Sharing) CORS是一种通过在服务器端设置响应头来实现跨域访问的方法。在本地JSON文件中,我们需要在服务器端设置Access-Control-Allow-Origin响应头,允许指定域名的跨域请求。 例如,在服务器端的响应头中添加如下代码: ```javascript Access-Control-Allow-Origin: http://example.com ``` 然后在网页上使用Ajax请求: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'local.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } }; xhr.send(); ``` 这样就可以通过CORS方式跨域请求并获取本地的JSON数据。 总结:通过使用JSONP或CORS方式,我们可以实现跨域请求本地的JSON文件。JSONP通过创建<script>标签,而CORS则通过在服务器端设置响应头,使得跨域请求合法化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值