• jQuery ajax跨域请求的解决方法


      在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数据,事实上简单来说请求同一个域名下的url或者说用不带http的绝对路径和相对路径请求是没有任何问题的,如果请求外部资源,那么这就称为跨域请求。

      由于安全性的问题,浏览器默认不支持跨域调用,晚上也有很多方法,各有优缺点,但是有一个比较好的解决方法这也是jQuery1.2之后官方推荐的,那就是在客户端和服务端同时加参数,这样双方都是信任的那么浏览器就不会阻止了,举个例子:

      先看客户端代码:

    1 $.getJSON("http://domain/home/join/test?jsoncallback=?",{"from":$("#homecity_name").val(),"to":$("#getcity_name").val(),"time":$("#time").val()},function(result){
    2                 if(result == "pass"){
    3                     //具体操作
    4                     return true;
    5                 }
    6             });

      不必关心参数和回调等细节,主要看请求的URI中,多了个参数jsoncallback=?,就这么简单,其他完全不变

      然后看服务端:

    1 public function test(){
    2         $ajax = I('get.jsoncallback');
    3         echo $ajax."('pass')";
    4     }

      其他的逻辑也不用考虑,主要看先通过get获取jsoncallback参数的值,然后返回jsoncallback值开头的json数据格式,而这个jsoncallback参数的值是变化的,最终正好的服务端返回的一致,所以最终获得回调数据,这里只是简单的例子,实际上返回值还可以写成:$ajax."('name':'value'....)";这种格式

      那么请求地址是:http://domain/home/join/test?jsoncallback=jQuery111107590998236555606_1445756963910&from=%E4%B8%8A%E6%B5%B7&to=%E5%B9%BF%E5%B7%9E&time=2015-10-25&_=1445756963911

      这里的参数是:jsoncallback=jQuery111107590998236555606_1445756963910

      那么回调结果就是:jQuery111107590998236555606_1445756963910('pass')

      现在原理就清楚了吧,实际上我们并不需要关心jsoncallback的值,我们使用返回值的方法还是不变,这只是浏览器和服务器之间的一种跨域交互方式

      继续补充:如果是我们用底层的ajax方法请求后台json数据时,写法可以如下:

     1 $.ajax({
     2     type:"get",    //请求方式
     3     async:true,    //是否异步
     4     url:"http://www.domain.net/url",
     5     dataType:"jsonp",    //跨域json请求一定是jsonp
     6     jsonp: "callbackparam",    //跨域请求的参数名,默认是callback
     7         //jsonpCallback:"successCallback",    //自定义跨域参数值,回调函数名也是一样,默认为jQuery自动生成的字符串
     8     data:{"query":"civilnews"},    //请求参数
     9 
    10     beforeSend: function() {
    11         //请求前的处理
    12     },
    13 
    14     success: function(data) {
    15         //请求成功处理,和本地回调完全一样
    16     },
    17 
    18     complete: function() {
    19         //请求完成的处理
    20     },
    21 
    22     error: function() {
    23         //请求出错处理
    24     }
    25 });

      这就是用ajax请求的具体方法,其他的使用都完全一样,服务端返回json数据要用小括号包围,例如本例用php可以这样写:

    echo $_GET['callbackparam']."(".json_encode($result_array).")";

      这样返回就行了,其余都一样

      到这里,高层的get,getJSON和底层的ajax跨域请求,都能很容易的解决了

  • 相关阅读:
    (4)Maven快速入门_4在Spring+SpringMVC+MyBatis+Oracle+Maven框架整合运行在Tomcat8中
    (3)Maven快速入门_3在Eclipse中创建Maven项目打包成jar
    (2)Maven快速入门_2maven在Eclipse中的设置
    (1)Maven快速入门_1maven安装
    (11)Microsoft office Word 2013版本操作入门_word中表格操作
    (10)Microsoft office Word 2013版本操作入门_word表格
    洛谷 P2144 [FJOI2007]轮状病毒
    洛谷 P2234 [HNOI2002]营业额统计
    【模板】主席树
    洛谷 P2572 [SCOI2010]序列操作
  • 原文地址:https://www.cnblogs.com/freeweb/p/4908832.html
Copyright © 2020-2023  润新知