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

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

  先看客户端代码:

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

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

  然后看服务端:

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

  其他的逻辑也不用考虑,主要看先通过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数据时,写法可以如下:

 $.ajax({
type:"get", //请求方式
async:true, //是否异步
url:"http://www.domain.net/url",
dataType:"jsonp", //跨域json请求一定是jsonp
jsonp: "callbackparam", //跨域请求的参数名,默认是callback
//jsonpCallback:"successCallback", //自定义跨域参数值,回调函数名也是一样,默认为jQuery自动生成的字符串
data:{"query":"civilnews"}, //请求参数 beforeSend: function() {
//请求前的处理
}, success: function(data) {
//请求成功处理,和本地回调完全一样
}, complete: function() {
//请求完成的处理
}, error: function() {
//请求出错处理
}
});

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

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

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

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

jQuery ajax跨域请求的解决方法的更多相关文章

  1. jquery ajax跨域的完美解决方法(jsonp方式)

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码     今天在项目中需要做远程数据加载 ...

  2. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  3. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  4. Ajax跨域请求怎么解决?

    前言 项目中需要将第三方系统中,对应用户的代办消息集成到系统中.对方提供了获取对应用户的接口url,但是由于两边的系统是部署到客户现场不同IP的虚机上的,所以进行ajax请求的时候是属于跨域请求的.之 ...

  5. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  6. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

  7. ajax本地跨域请求以及解决方法

    什么是跨域?   我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...

  8. AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  9. jquery+ajax跨域请求webservice

    最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...

随机推荐

  1. 用freemarker生产静态页面

    FreeMarker概述 * FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写     * Template + data model = output    ...

  2. Java编程思想学习(十) 正则表达式

    正则表达式是一种强大的文本处理工具,使用正则表达式我们可以以编程的方法,构造复杂的文本模式,并且对输入的字符串进行搜索.在我看来,所谓正则表达式就是我们自己定义一些规则,然后就可以验证输入的字符串是不 ...

  3. codevs4927 线段树练习5

    题目描述 Description 有n个数和5种操作 add a b c:把区间[a,b]内的所有数都增加c set a b c:把区间[a,b]内的所有数都设为c sum a b:查询区间[a,b] ...

  4. TYVJ1305 最大子序和

    描述 输入一个长度为n的整数序列,从中找出一段不超过M的连续子序列,使得整个序列的和最大. 例如 1,-3,5,1,-2,3 当m=4时,S=5+1-2+3=7当m=2或m=3时,S=5+1=6 输入 ...

  5. WDCP(WDlinux Control Panel) mysql/add_user.php、mysql/add_db.php Authentication Loss

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 http://www.wooyun.org/bugs/wooyun-2010-06 ...

  6. appium向右滑动

    /*** * 右滑1/2屏幕 / public static void slideRight(){ int x=driver.manage().window().getSize().width; in ...

  7. 【干货】Laravel --实战篇 UUID(唯一识别码)

    前言 : 一般的唯一识别id都是各种时间戳.毫秒级时间戳加php内置函数或者加上随机数等手段来生成的. 下面给大家介绍一个组件,也是我在各个实战项目中必不可少的一个组件,ramsey/uuid.一.r ...

  8. uva 10723 Cyborg Genes(LCS变形)

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=107450#problem/C 题意:输入两个字符串,找一个最短的串,使得输入的两个 ...

  9. x86汇编指令详解

    80x86指令系统 80x86指令系统,指令按功能可分为以下七个部分. (1) 数据传送指令. (2) 算术运算指令. (3) 逻辑运算指令. (4) 串操作指令. (5) 控制转移指令. (6) 处 ...

  10. Spring学习6-Spring整合Struts2

    一.Spring为什么要整合Struts2     Struts2与Spring进行整合的根本目的就是要让 Spring为Struts2的Action注入所需的资源对象,它们整合的原理则是只要导入了s ...