使用 jQuery 进行跨域 ajax JSONP 请求

Posted

技术标签:

【中文标题】使用 jQuery 进行跨域 ajax JSONP 请求【英文标题】：Make cross-domain ajax JSONP request with jQuery 【发布时间】：2012-07-29 00:03:26 【问题描述】：

我想用 jquery ajax 解析 JSON 数组数据，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var result;
    function jsonparser1() 
        $.ajax(
            type: "GET",
            url: "http://10.211.2.219:8080/SampleWebService/sample.do",
            dataType: "jsonp",
            success: function (xml) 
                alert(xml.data[0].city);
                result = xml.code;
                document.myform.result1.value = result;
            ,
        );
            
</script>    
</head>
<body>
<p id="details"></p>
<form name="myform">
    <input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />
    <input type="text" name="result1" readonly="true"/>        
</form>
</body>
</html>

我的 JSON 数据是：

"Data":   ["Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai","Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai","Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai","Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai","Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"],"Code":true

但我没有得到任何输出...请大家帮忙...

【问题讨论】：

也许是你的后端没有返回任何东西。发布吧！ 使用 JSON.parse 解析 JSON 数据。成功：function(data) var result = JSON.parse(data);文档...值 = 结果。代码； 我在这里写了这个问题的答案：Loading cross domain html page with jQuery AJAX - 最后一个，支持https 【参考方案1】：

概念解释

您是否正在尝试进行跨域 AJAX 调用？意思是，您的服务不是托管在同一个 Web 应用程序路径中吗？您的网络服务必须支持方法注入才能执行 JSONP。

您的代码看起来不错，如果您的 Web 服务和您的 Web 应用程序托管在同一个域中，它应该可以工作。

当您使用dataType: 'jsonp' 执行$.ajax 时，意味着jQuery 实际上是在向查询URL 添加一个新参数。

例如，如果您的 URL 是 http://10.211.2.219:8080/SampleWebService/sample.do，那么 jQuery 将添加 ?callback=some_random_dynamically_generated_method。

这种方法更像是一种实际附加在window 对象中的代理。这并不具体，但看起来像这样：

window.some_random_dynamically_generated_method = function(actualJsonpData) 
    //here actually has reference to the success function mentioned with $.ajax
    //so it just calls the success method like this: 
    successCallback(actualJsonData);

总结

您的客户端代码看起来还不错。但是，您必须修改服务器代码以使用与查询字符串一起传递的函数名称来包装 JSON 数据。即

如果您已请求查询字符串

?callback=my_callback_method

那么，您的服务器必须响应这样包装的数据：

my_callback_method(your json serialized data);

【讨论】：

我在这里写了这个问题的答案：Loading cross domain html page with jQuery AJAX - 最后一个，支持https @AbdulMunim：可以在$.ajax的url属性中提到json文件吗？ url 属性支持哪些文件扩展名？填充的 js 回调是否会返回任何内容？ 这就是我在控制台中收到此错误的原因：Uncaught SyntaxError: Unexpected token :？错误有一个链接，一旦我点击它就会显示 JSON 数据。【参考方案2】：

您需要使用 ajax-cross-origin 插件： http://www.ajax-cross-origin.com/

只需添加选项 crossOrigin: true

$.ajax(
    crossOrigin: true,
    url: url,
    success: function(data) 
        console.log(data);
    
);

【讨论】：

如果我做对了，它会通过第三方代理进行路由。方便，但通过服务器的流量可能会破坏最初的想法 我已经添加了相同的内容，但每次它都会给出失败的错误。我正在使用 jsonp 数据类型。【参考方案3】：

您的 JSON 数据包含属性 Data，但您正在访问 data。区分大小写

function jsonparser1() 
    $.ajax(
        type: "GET",
        url: "http://10.211.2.219:8080/SampleWebService/sample.do",
        dataType: "json",
        success: function (xml) 
            alert(xml.Data[0].City);
            result = xml.Code;
            document.myform.result1.value = result;
        ,
    );

EDIT 此外，City 和 Code 的大小写错误。 （感谢@Christopher Kenney）

EDIT2它也应该是json，而不是jsonp（至少在这种情况下）

更新根据您的最新评论，您应该阅读这个答案：https://***.com/a/11736771/325836 Abdul Munim

【讨论】：

如果您尝试直接浏览 URL 会发生什么？ 您在浏览器的错误控制台中遇到了哪些错误？ 它显示有意外的令牌：在 JSON 数据中......但它在 JSON 中使用数组的正确方法是对的？？？ @ChristopherKenney：如果我将数据类型设置为“json”，则会显示错误。如果我把它写成 'jsonp' 就可以了。 如果我使用 json 而不是 jsonp 会出错：1) XMLHttpRequest 无法加载 10.211.2.219:8080/SampleWebService/sample.do。 Access-Control-Allow-Origin 不允许来源localhost:3555。 sample.do 2)GET 10.211.2.219:8080/SampleWebService/sample.do未定义（未定义）【参考方案4】：

试试

alert(xml.Data[0].City)

区分大小写！

【讨论】：

【参考方案5】：

您需要使用 jquery json parse 解析您的 xml...即

  var parsed_json = $.parseJSON(xml);

【讨论】：

是在success函数里吗？因为我在控制台中收到错误：Uncaught SyntaxError: Unexpected token : 并且它显示错误功能警报，甚至没有命中成功功能。【参考方案6】：

警报(xml.data[0].city);

改用 xml.data["Data"][0].city

【讨论】：

【参考方案7】：

使用由 Yahoo 托管的开放公共代理 YQL。处理 XML 和 HTML

https://gist.github.com/rickdog/d66a03d1e1e5959aa9b68869807791d5

【讨论】：

以上是关于使用 jQuery 进行跨域 ajax JSONP 请求的主要内容，如果未能解决你的问题，请参考以下文章

jquery ajax使用JSONP解决跨域问题

jquery ajax使用JSONP解决跨域问题

跨域请求之jQuery的ajax jsonp的使用解惑

JQuery+ajax+jsonp 跨域访问

JQuery+ajax+jsonp 跨域访问

JQuery - $.ajax() - 使用 JSONP 的跨域 - 仅在 IE 8 中获取“解析器错误”（在 IE 7 中工作）