ajax 跨域 4种方法


一,传统的ajax方法

1,js代码
查看复制打印?

    $("#ajax").click(function(){  
     $.ajax({  
     type: "POST",  
     url: "http://manual.51yip.com/test2.php",  
     data: 'name=ajax',  
     dataType:"json",  
     success: function(data){  
     $('#Result').text(data.name);  
     }  
     });  
     });  

2,test2.php代码
查看复制打印?

    <?php  
    header("Access-Control-Allow-Origin:http://www.baidu.com");    //允许blog.51yip.com提交访问  
    //header("Access-Control-Allow-Origin:*");    //允许任何访问  
    echo json_encode($_POST);  
?> 二,ajax jsonp
1,js代码 查看复制打印? $("#jsonp").click(function(){ $.ajax({ url: 'http://manual.51yip.com/test1.php', data: {name: 'jsonp'}, dataType: 'jsonp', jsonp: 'callback', //为服务端准备的参数 jsonpCallback: 'getdata', //回调函数 success: function(){ alert("success"); } }); }); function getdata(data){ $('#Result').text(data.name); } 2,test1.php 查看复制打印? <?php if(isset($_GET['name']) && isset($_GET['callback'])) //callback根js端要对应,不然会报错的 { echo $_GET['callback']. '(' . json_encode($_GET) . ');'; //格式固定的,为什么这样,不清楚 } ?> 三,$.getJSON 查看复制打印? $("#getjson").click(function(){ $.getJSON('http://manual.51yip.com/test1.php?name=getjson&callback=?', function(data){ //没有回调函数,直接处理 $('#Result').text(data.name); }); }); 四,$.getScript 查看复制打印? $("#getscript").click(function(){ $.getScript('http://manual.51yip.com/test1.php?name=getscript&callback=getdata'); //回调函数根jsonp一样 }); 也可以通过查看例子源码,来查看JS代码
几点注意:header("Access-Control-Allow-Origin:*"); //允许任何访问

ajax 设置Access-Control-Allow-Origin实现跨域访问     
参考:http://blog.csdn.net/fdipzone/article/details/46390573               
posted @ 2016-03-18 09:31  侠岚之弋痕夕  阅读(474)  评论(0编辑  收藏  举报
Where is the starting point, we don't have a choice, but the destination where we can pursue!