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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
Angularjs 基础入门
Dec 26 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
JavaScript实现通讯录功能
Dec 27 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实现自动对图片进行滚动显示的方法
2015/03/12 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
python简单实现旋转图片的方法
2015/05/30 Python
python executemany的使用及注意事项
2017/03/13 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
什么时候用assert
2015/05/08 面试题
党的生日活动方案
2014/08/15 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
会议通知格式范文
2015/04/15 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python