Jquery跨域获得Json的简单实例


Posted in Javascript onMay 18, 2016

这两天用 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的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery来定位
Feb 20 Javascript
js身份证验证超强脚本
Oct 26 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 #Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 #Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 #Javascript
深入理解jquery跨域请求方法
May 18 #Javascript
判断是否存在子节点的实现代码
May 18 #Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 #Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 #Javascript
You might like
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python中_del_还原数据的方法
2020/12/09 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
个人委托书范本
2014/04/02 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
党校学习个人总结
2015/02/15 职场文书
就业证明函
2015/06/17 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL