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\"}] }");
时间: 2024-10-02 21:19:48

Jquery跨域获得Json的相关文章

jquery跨域请求json数据

//服务端生成json数据json.php <?php $json=array("Volvo","BMW","SAAB"); $cb = $_GET['callback']; echo $cb.'('.json_encode($json, true).')'; ?> //客户端Ajax请求数据<script> $(document).ready(function() { var url="http://域名/js

Asp.net MVC3 实现jquery跨域获取json

JSONP可以帮我们解决跨域访问的问题.JSONP is JSON With Padding. 这里我们将不再解释其原理.我们来看在ASP.NET MVC 3 如何实现.首先我们需要定义一个JsonpResult. 代码像这样, 直接继承自JsonResult, override了ExecuteResult方法 public class JsonpResult : JsonResult { private static readonly string JsonpCallbackName = "c

JQuery跨域加载JSON数据或HTML。

前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $.ajax({ type: "get", async: false, url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL,该URL返回一段JS数据.如需返回HTML,只需把HTML组织成JSON即可

IT忍者神龟之jQuery 使用 $.getJSON() 跨域获取 JSON 数据

假设在服务器上有文件 http://test.unmi.cc/json.php 文件,它的内容为: [代码 1] 01 02 03 04 05 06 07 08 09 10 <?php header('Content-type: application/json'); $user = array (     "name"  => "Unmi",     "blog" => "http://unmi.cc" )

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

Ajax + java 跨域访问Json

使用jsonp跨域获取json数据.Ajax获取JAVA服务器json数据. 在Servlet 中代码: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setHeader("Access-Control-Allow-Origin", "*");//开启CORS,

jQuery 跨域访问的三种方式 No &#39;Access-Control-Allow-Origin&#39; header is present on the reque

问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1 Resource interpreted as Script but transferred

jquery跨域访问解决方案

客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题.便记录下来,以供查阅.         jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.        真实案例:        $.ajax({             async:false,             url: 'http:

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源策略的限制. 跨域的情形有非常多,最常见的有Ajax跨域.Socket跨域和Canvas跨域.以下列举一些我们常见的跨域情形下.某些浏览器控制台给出的错误提示: FireFox下的提示: 已阻止交叉源请求:同源策略不同意读取***上的远程资源.能够将资源移动到同样的域名上或者启用 CORS 来解决问