这次给大家带来jquery跨域获得json方式方法，jquery跨域获得json的注意事项有哪些，下面就是实战案例，一起来看一下。
这两天用 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\}] });
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
asp处理json数据步骤详解
html直接显示json方法详解
以上就是jquery跨域获得json方式方法的详细内容。