今天发现json取数据的时候有时会报如下的错误:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
我是有很多的子域名,网上说是跨域的的问题,貌似可以通过jsonp解决,于是测试了一下,遇到以下几个问题:
1.jsonp好像是通过iframe创建<script>标签来执行请求的,所以默认是通过get方式请求,即使ajax请求的type设为post也被自动转为post,要想以post请求设置也比较麻烦,具体参考:http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery
2.直接将函数放在document.ready闭包里,像下面的写法,不会走到receive函数里
<script type="text/javascript">
$(function() {
//function viewWholePhone(url){
$('#btn_show_num').click(function(){
$.ajax({
type:"get",
url:$(this).attr("data-check-url"),
data:{sn:'{$sn}'},
dataType: 'jsonp',
crossDomain: true,
jsonp:"callback",
jsonpCallback:"receive",
success:function(ret){
}
});
});
//}
function receive(ret) {
if(ret.status == 0 && ret.data!=null){
$('#store_mobile').text(ret.data.store_mobile);
$('#btn_show_num').hide();
}else{
if(ret.status == 300){
location.href="{$site_url}/index.php?app=member&act=login&ret_url=";
}else{
alert(ret.msg);
$('#btn_show_num').attr('readonly', 'true');
}
}
}
});
</script>
下面这个样子是可以的
<script type="text/javascript">
function viewWholePhone(url){
$.ajax({
type:"POST",
url:url,
data:{sn:'{$sn}'},
dataType: 'jsonp',
crossDomain: true,
jsonp:"callback",
jsonpCallback:"receive",
success:function(ret){
}
});
}
function receive(ret) {
if(ret.status == 0 && ret.data!=null){
$('#store_mobile').text(ret.data.store_mobile);
$('#btn_show_num').hide();
}else{
if(ret.status == 300){
location.href="{$site_url}/index.php?app=member&act=login&ret_url=";
}else{
alert(ret.msg);
$('#btn_show_num').attr('readonly', 'true');
}
}
}
</script>