在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数据,事实上简单来说请求同一个域名下的url或者说用不带http的绝对路径和相对路径请求是没有任何问题的,如果请求外部资源,那么这就称为跨域请求。
由于安全性的问题,浏览器默认不支持跨域调用,晚上也有很多方法,各有优缺点,但是有一个比较好的解决方法这也是jQuery1.2之后官方推荐的,那就是在客户端和服务端同时加参数,这样双方都是信任的那么浏览器就不会阻止了,举个例子:
先看客户端代码:
复制代码
1 KaTeX parse error: Expected '}', got 'EOF' at end of input: …ack=?",{"from":("#homecity_name").val(),“to”:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲getcity_name").…("#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 KaTeX parse error: Expected 'EOF', got '}' at position 24: …pass')"; 4 }̲ 其他的逻辑也不用考虑,主…ajax."(‘name’:‘value’…)";这种格式
这里的参数是: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
G
E
T
[
′
c
a
l
l
b
a
c
k
p
a
r
a
m
′
]
.
"
(
"
.
j
s
o
n
e
n
c
o
d
e
(
_GET['callbackparam']."(".json_encode(
GET[′callbackparam′]."(".jsonencode(result_array).")";
这样返回就行了,其余都一样
到这里,高层的get,getJSON和底层的ajax跨域请求,都能很容易的解决了