Jquery跨域获得Json的简单实例

站长资源 2024/11/29 佚名

62 1538 62

DDR爱好者之家 Design By 杰米

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

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

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

JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback="htmlcode">

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" 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="http://192.168.20.86/friend/getMyJsonData.aspx", 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的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

jquery,json,跨域

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Jquery跨域获得Json的简单实例”

暂无评论...

Jquery跨域获得Json的简单实例

jquery解析XML及获取XML节点名称的实现代码

jQuery 获取跨域XML(RSS)数据的相关总结分析

评论“Jquery跨域获得Json的简单实例”

更新日志

友情链接