今天发现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>