• JSON跨域请求


    原理:首先客户机会注册一个callback,在发送跨域请求之前,会在url后附带注册的callback参数(如:callback1982342322),随后服务器拿到了callback参数,获取数据后再拼接json数据(如:callback1982342322({status:"ok",fantasy [{ key:value }] }) ),此处应该注意服务器拿到的callback要和客户机上的callback一致,否则跨域不成功,用chrom浏览器可发现 callbackxxx is not defined 

    1. 客户端跨域请求json数据方式

      - $.ajax( type , async , url , dataType , jsonp ,success : function(json){expression...} , error : function(){expression...})

      这里说明一点,就是jquery是不支持post方式的跨域请求

      - $.getJSON( url , param , function(json){ expression ... })

    2. 服务器端设置

      参数: callback / param...

      响应: callback({

          status:"ok",

          fantasy[{

            key1:value1,

            key2:value2

            }]

          });

    3. 错误

      收集了测试和实战过程中出现的一些错误

        1.Origin null is not allowed by Access-Control-Allow-Origin 不支持本地Ajax请求
    
       2.jquery12334223232 is not defined  没有注册callback参数,利用谷歌浏览器的开发者工具查看跨域请求里是否含有callback参数和值,然后检查服务器是否接收                       callback参数并拼接成json格式的数据响应给客户机
    
       3.XMLHttpRequest cannot load http://i.nubb.com/fcms/conn/shareToFantasy.htm?fid=11&callback=jsoncallback102131211. Origin http://fantasy.nubb.com is not allowed by Access-Control-Allow-Origin.
    
      解决方法:选定google浏览器快捷方式右键 -> 属性 -> 目标(T) -> 加上 --disable-web-security (如:"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security)

    4. 实例:

      

    <script type="text/javascript">
                            jQuery(document).ready(function(){ 
                                $.ajax({
                                     type: "get",
                                     async: false,
                                     url: "http://i.nubb.com/fcms/conn/shareToFantasy.htm?fid=<%=team.getFans_id()%>&format=jsonp",
                                     dataType: "jsonp",
                                     jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                                     success: function(json){
                                         //dom生成数据
                                         for(var num in json.fantasy){
                                     var html = "<div class="tao"><div class="tao1"><span class="t">"
                                            +"<p><span>$qc-read</span><a href="#"><img src="/images/sd_career/liu.gif" /> </a></p>"
                                            +"</span><div class="wenzi">"
                                            +"<h3>$qc-title</h3>"
                                            +"<div class="d">"
                                            +"<p><a href="http://i.nubb.com/fans/Topicdetail.htm?fid=$qc-fid&aid=$qc-aid" target="_blank">$qc-desc</a>"
                                            +"<dl>"
                                                +"<dt><a href="javascript:;" target="_blank"><img src="http://i.nubb.com$qc-ulogo" /></a></dt>"
                                                +"<dd><a href="http://i.nubb.com/home/$qc-uid.htm" target="_blank">$qc-uname</a> <span id="qc-time">发布于 $qc-time</span></dd>"
                                            +"</dl>"
                                            +"</p></div></div></div></div>";
                                             console.log(json.fantasy[num]);
                                             html = html.replace("$qc-aid", json.fantasy[num].aid);
                                             html = html.replace("$qc-fid", <%=team.getFans_id()%>);
                                             html =html.replace("$qc-read", json.fantasy[num].read);
                                             html =html.replace("$qc-title", json.fantasy[num].title);
                                             html =html.replace("$qc-desc", json.fantasy[num].desc);
                                             html =html.replace("$qc-uid", json.fantasy[num].uid);
                                             html =html.replace("$qc-uname", json.fantasy[num].uname);
                                             html =html.replace("$qc-ulogo", json.fantasy[num].ulogo);
                                             html =html.replace("$qc-time", json.fantasy[num].time.substring(0,10));
                                             $(".taolun").append(html);
                                         }
                                     },
                                     error: function(){
                                         console.log('非法请求');
                                     }
                                 });
                             });
                        </script>

                          

  • 相关阅读:
    linux-Windows文件上传Linux
    linux-ifconfig 查看没有IP
    springBoot 发布war/jar包到tomcat(idea)
    linux-常用命令
    (转)JVM各种内存溢出是否产生dump
    数据库缓存的几种方式
    使用jprofiler分析dump文件一个实例
    Hibernate之一级缓存和二级缓存
    最佳实践 缓存穿透,瞬间并发,缓存雪崩的解决方法
    缓存与数据库一致性之三:缓存穿透、缓存雪崩、key重建方案
  • 原文地址:https://www.cnblogs.com/xmaomao/p/3360989.html
Copyright © 2020-2023  润新知