html页面js跨域获取json数据,JS跨域获得Json的应用
这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值,
一般跨域用到的两个方法为:$.ajax 和$.getJSON
最后,仔细安静下来,细读 json 官方文档后发现这么一段:
JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。
其实jquery跨域的原理是通过外链
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('
' + item.title + '
');
});
}
});
服务器需要这样返回数据示例:
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('
' + item.title + '
');
});
}
服务器需要这样返回数据示例:
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('
' + item.title + '
');
});
}
});
服务器需要这样返回数据示例:
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('
' + item.title + '
');
});
});
服务器需要这样返回数据示例:
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\"}] }");
html页面js跨域获取json数据,JS跨域获得Json的应用相关推荐
- js html 处理json数据,JS中Json数据的处理和解析JSON数据的方法详解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
- 29-30Python多线程、多线程、使用threading模块创建线程;JSON数据解析、编码为JSON类型转换对应表、Python类型转换对应表、json.dumps与json.loads
29Python3多线程 多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,比如用户点击了一个按钮去触发某些 ...
- python处理json数据 乱码报错_python json.loads json.dumps(ensure_ascii = False) 汉字乱码问题解决...
有这样一个需求: 需要一个json 文件 数据从数据库里查询出来 1. 设置文件头 # -*- coding:utf-8 -*- 2. 连接数据库 将数据库连接数据库的编码设置为utf8 db = M ...
- 跨域获取后台数据undefined_同源策略amp;JSONP跨域
同源策略&JSONP跨域 同源策略 对于同源的定义,MDN给出了这样的解释:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源. 如何确定两个页面是否同源,只要比较两个 ...
- mvc ajax post json数据,springmvc解决ajax post json格式数据的跨域问题
前言:今天解决js跨域,搞了一下午,呜呜,以下是我整理的一些解决方法. Paste_Image.png JsonTest click me var jsonData = JSON.stringify( ...
- html页面加载json数据,在html中显示JSON数据的方法
背景: 有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便查看.需要格式化一下. 解决方案: 其实JSON.str ...
- JS中Json数据的处理和解析JSON数据的方法详解
学习目标: 节数 知识点 要求 第一节 数组去重 数组去重 了解 第二节 数组排序 数组排序 了解 第三节 json概述 json概述 掌握 第四节 json方法 json方法 掌握 第五节 json ...
- html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据 本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
- js html 处理json数据,js 解析JSON数据
链接原文转自:http://www.w3cschool.cn/json/xumd1piw.html http://www.cnblogs.com/zoumiaomiao/p/4909539.html ...
- html5处理json数据,js解析json数组
js读取解析JSON类型数据 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 Jav ...
最新文章
- asp.net 服务器应用程序不可用
- 设计模式C#描述之——简单工厂模式、抽象工厂模式、单例与多例模式
- JavaScript笔记 基础知识总结2
- 进程间通信 - 动态链接库实现
- 08 域控 架构主机 转移_论无服务器架构的特征
- 拉格朗日c语言实验报告,拉格朗日插值法C语言的实现(实验报告)(9页)-原创力文档...
- DLNA, PulseAudio, diffpatch, bash
- linux下启动oracle
- ionic滚动条返回顶部
- 网络流入门题目 - bzoj 1001
- python找到列表中最大和最小的数
- Angular之constructor和ngOnInit差异及适用场景
- 识别 零极点 matlab,matlab计算零极点分布图
- 海思SD3403开发/SS928V100 移植Yolo模型
- teracopy php,Unraid 升级到 UnRaid 6.0的详细操作步骤(三)
- SQL Prompt v5.3.0.3
- 送给23岁的风华年少
- ILRuntime学习(之四)
- A hybrid method of exponential smoothing and recurrent
- Qt项目实战之网络电子白板-安晓辉-专题视频课程