这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值,

一般跨域用到的两个方法为:$.ajax 和$.getJSON

最后,仔细安静下来,细读 json 官方文档后发现这么一段:

JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。

其实jquery跨域的原理是通过外链 <script>  来实现的,然后在通过回调函数加上回调函数的参数来实现真正的跨域

Jquery 在每次跨域发送请求时都会有callback这个参数,其实这个参数的值就是回调函数名称,所以,服务器端在发送json数据时,应该把这个参数放到前面,这个参数的值往往是随机生成的,如:jsonp1294734708682,同时也可以通过 $.ajax 方法设置 callback 方法的名称。明白了原理后,服务器端应该这样发送数据:

string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";

这样,json 数据 {\"userid\":0,\"username\":\"null\"} 就作为了 jsonp1294734708682 回调函数的一个参数

下面我们来开始实例

假如正常返回的数据:

{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }

下面我们来介绍下jquery的自己个参数

/**
*@dataType (String)
*"xml": 返回 XML 文档,可用 jQuery 处理。
*"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
*"script": 返回纯文本 JavaScript 代码。"json": 返回 JSON 数据 。
*"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
*"text": 返回纯文本字符串
*//**
*@jsonp (String)在一个jsonp请求中重写回调函数的名字。
*这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,
*比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
*//**
*@jsonpCallback (String)
*为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
*这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。
*你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。
*/

1不指定jsonp的名称、

$.ajax({url: 'http://lifeloopdev.info/get_events',dataType: "jsonp",data: "offset=0&num_items=10",username: 'username',password: 'password',success: function (data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});}
});

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["callback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

2指定jsonp名称,和返回函数名称的function、

//这里我们自己指定了jsonp的callback的名字
$.ajax({url: 'http://lifeloopdev.info/get_events',dataType: "jsonp",data: "offset=0&num_items=10",username: 'username',password: 'password',jsonp: "successCallback",jsonpCallback: 'successCallback'
});function successCallback(data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});
}

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

3指定jsonp名称,不指定返回函数名称的function、

$.ajax({url: 'http://lifeloopdev.info/get_events',dataType: "jsonp",data: "offset=0&num_items=10",username: 'username',password: 'password',jsonp: "successCallback",success: function (data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});}
});

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

4使用getJSON()获取数据、

/**
*注意:
*这里调用的地址中jsoncallback=? 是关键的所在!其中我们关心的是 jsoncallback=? 起什么作用了?原来 jsoncallback=? 被替换后,会把方法名称传给服务器。
*我们在服务器端要做什么工作呢?服务器要接受参数 jsoncallback ,然后把 jsoncallback 的值作为 JSON 数据方法名称返回 .
*/
$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});
});

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["jsoncallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

Jquery跨域获得Json相关推荐

  1. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  2. JSONP跨域获取JSON数据(含jQuery方法)——李帅醒博客

    首先我要强调JSONP和AJAX没有半毛钱关系,别把他们混淆!!!只不过他们都是从后台获取数据的方法! 前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨 ...

  3. jquery跨域调用wcf

    使用jquery跨域调用wcf服务的时候会报如下错误 1 $.ajax({ 2 url: 'http://localhost:28207/Service1.svc/GetData', 3 method ...

  4. Jquery跨域请求php数据(jsonp)

    Jquery跨域请求php数据 我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...

  5. jquery跨域调用webService

    jquery跨域调用webService,以及解决跨域情况下只能返回XMl格式数据的问题 http://lu.9efish.com/blog/jquery-cross-domain-call-asp. ...

  6. jquery跨域获取数据以及分页

    今天做了一个jquery跨域获取josn数据的功能,同时对获取的数据进行分页.看代码: html 代码: 代码 <! DOCTYPE html PUBLIC  " -//W3C//DT ...

  7. 浏览器禁止跨域请求json数据解决方法--jsonp

    浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...

  8. jquery ajax跨域asp,jQuery跨域调用Asp.Net Web API

    Asp.Net Web API是一个轻量级的Web服务,当Web API和Web程序不是部署在同一域的时候,要使用jQuery来实现调用API的接口就存在跨域的问题.下面介绍两种方式来解决jQuery ...

  9. 跨域,json与jsonp格式

    好久都没有写随笔了,最近大家都忙着考试要放假了,我也要忙一忙喽.....不过再忙我还是来啦 简单的说,json是一种轻量级的数据交换格式.平时我们使用ajax等使用的一种数据形式,那么今天就说说jso ...

最新文章

  1. 学习笔记(5)——实验室集群LVS监控Web界面配置
  2. CopyOnWrite容器
  3. python字符串补空格输出_python格式化打印字符串
  4. VTK:IO之ReadDICOM
  5. ACNet论文阅读笔记
  6. python中truncate的用法_在Python中操作文件之truncate()方法的使用教程
  7. [react] react中发起网络请求应该在哪个生命周期中进行?为什么?
  8. 批发电脑配件_2019年10月电脑配件表
  9. 按键精灵bmp图片怎么导出_发光字怎么制作,招牌LED发光字工艺
  10. 今天老师本来想讲另外一个题目, 但是由于大家不是很了解数组,因此写了一些数组让我们练习...
  11. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-1.数据信息安全--微信授权一键登录功能介绍...
  12. Alamofire拦截请求AOP,URLProtocol
  13. QNAP 威联通 NAS的个人使用经验 篇三:#剁主计划-西安# 时隔3年,NAS使用须知
  14. spss变量视图转数据视图_教大家SPSS如何导入数据进行分析
  15. iwork8旗舰版 android,性能彪悍 双面神兽——酷比魔方iwork8旗舰版体验
  16. 谷歌学术搜索技巧,命令搜索
  17. 360众测靶场云文件服务器,360 政企安全官网_帮助应对高级威胁攻击
  18. 职场001 什么时候跳槽
  19. 做一名活动策划是什么体验?
  20. python中对字符串进行左、中、右对齐操作

热门文章

  1. OpenGL hdrb和loom的实例
  2. iphone微信美颜插件_iPhone、安卓微信自动更新,又有新功能?
  3. 01_关于TensorFlow、什么是数据流图(Data Flow Graph)、TensorFlow的特征、谁可以使用Tensorflow、为啥Google要开源这个神器?
  4. 2 TileMapObject的使用
  5. 一个easyui的案例(SSH)
  6. 将Android应用程序打包
  7. Homepage Machine Learning Algorithm 浅谈深度学习中的激活函数 - The Activation Function in Deep Learning
  8. 最全面的linux信号量解析
  9. 高人对libsvm的经典总结(全面至极)
  10. 项目实战4—HAProxy实现高级负载均衡实战和ACL控制