form1.cn
Make a little progress every day

使用$.getJSON+PHP实现跨域ajax请求

14th of April 2018 Javascript Jquery 1947

一、什么是跨域?


因为javascript同源策略的限制,a.com 域名下的js脚本无法操作b.com或是c.a.com域名下的对象。Ajax的应用中,由于安全的问题,浏览器默认是不支持javascript跨域调用的。

1.主域相同,子域不同,如xxx.aaa.com和yyy.aaa.com

2.域名相同,端口不同,如xxx.aaa.com:8000和xxx.aaa.com

3.域名相同,协议不同,如http://www.aaa.com/和https://www.aaa.com/

4.主机相同,用ip和域名的,http://127.0.0.1/和http://localhost/


都是会造成跨域的。网上有很多解决办法,下面介绍使用JQuery的getJSON方法处理跨域问题。


二、使用$.getJSON+PHP实现跨域ajax请求例子

jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数。原型如下:

jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。

url: 发送请求的地址

data : (可选) 待发送key/value参数

callback: (可选) 载入成功时的回调函数,主要用于客户端获取服务器JSON数据


前端请求端: 

<script> $(function() {
 $.getJSON('http://test.com/aa.php?callback=?',{classid:1,num:2},function(json){
      alert(json.key); 
    }); 
 }); 
 </script>


被请求端: 

//aa.php
$classid = $_GET['classid']; 
$num = $_GET['num']; 
if($classid && $num){
    $results = array("key" => "value"); 
    echo $_GET['callback'] . '(' . json_encode($results) . ')'; 
}


服务端接收被替换的callbak参数,比如:callback=JQUET0988002

所以一定在callback这个变量 在输出json数据时要带上callbak,值一致才可以getJSON成功 否则不会执行function(json) {…}内的任何操作


注意三点:

第一:在返回客户端之前,先用PHP函数json_encode将要返回的数据进行编码。

第二:返回到客户端用的是echo,而不是return。

第三:接到js的数据进行mysql存储时,要htmlspecalchars 和addslashes对&<>\ "  "  进行处理,否则会出异常。