如何使用 jQuery 调用带有 JSON 响应的 ajax 请求？答案

【问题标题】：How to call ajax request with JSON response using jQuery?如何使用 jQuery 调用带有 JSON 响应的 ajax 请求？
【发布时间】：2013-09-29 14:58:17
【问题描述】：

我无法从下面的代码中通过 jQuery.support.cors = true; 行打印成功。包括 jQuery.support.cors = true; 行会给出警告信息。那么如何在不丢失功能的情况下避免这种情况呢？我的主要目标是调用一个返回 JSON 数据的 REST Web 服务，我必须利用 JSON 数据。请帮助我如何实现这一目标。请提供工作样本

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
    jQuery.support.cors = true;
    $.ajax ({
        url: 'http://json-cricket.appspot.com/score.json',
        datatype: "json",
        success: function (e) {
            // Success callback
            alert("sucess");
        }})
</script>
 
</body>
</html>

【问题讨论】：

我认为选项是dataType，而不是全部小写，但不确定有多大的不同，如果 jquery 可以处理它，不记得了。 api.jquery.com/jQuery.ajax
"会给出警告信息" 哪个信息？跨域问题？
我认为这是一个跨域 ajax 请求？ stackoverflow.com/questions/11736431/…试试jsonp

标签： jquery ajax json

【解决方案1】：

您可能错过了添加 type //GET 或 POST，哪种类型的 REST OPEATION
dataType 拼写错误
错过添加contentType

 $.ajax({
            type: "POST", //rest Type
            dataType: 'jsonp', //mispelled
            url: "http://json-cricket.appspot.com/score.json",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                console.log(msg);                
            }
 });

更新： 在试图找出原因的同时，我认为这是best answer来理解问题。

假设您在域 abc.com 上，并且您想向域发出请求 xyz.com。为此，您需要跨越域边界，这是一个禁忌大多数浏览器领域。

绕过此限制的一项是标签。当你使用脚本标签，域限制被忽略，但在正常情况下在这种情况下，你真的不能对结果做任何事情，脚本只是被评估。

输入 JSONP。 当您向 JSONP 的服务器发出请求时启用，你传递一个特殊的参数告诉服务器一点关于你的页面。 这样，服务器就可以很好地结束以您的页面可以处理的方式响应。

【讨论】：

【解决方案2】：

最好的方法是使用 jsonp 请求。为此，只需将 dataType 指定为 jsonp

$.ajax({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: 'jsonp',
    success: function (data) {
        console.log(data);        
    }
});

查看jsFidle上的示例

【讨论】：

为小提琴投票 :)

【解决方案3】：

CORS（跨域资源共享）与 XSS 不同。

$.support.cors 包含测试当前浏览器是否支持 cors 的测试结果。更改它不会使浏览器支持 cors。

此外，您的服务器必须通过返回正确的标头来支持 CORS。

【讨论】：

【解决方案4】：

试试这个，效果最好。这个用在REST Architecture中，响应速度非常快

function CallService(sucessData) {
    $.ajax({
        // Add code for Cross Domain
        headers: getHeaders(),
        type: varType, //GET or POST or PUT or DELETE verb
        url: varUrl, // Location of the service
        data: varData, //Data sent to server
        contentType: varContentType, // content type sent to server
        dataType: varDataType, //Expected data format from server
        processdata: varProcessData, //True or False
        crossDomain: true,
        timeout: 200000,
        success: sucessData,
        error: function (xhr) {// When Service call fails
            alert("Error: " + xhr.responseText);
        }
    });
}

【讨论】：

【解决方案5】：

如果你请求跨域服务，那么你需要包含jQuery.support.cors = true;。正确的 AJAX 代码是：

 $.ajax ({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: "json",
    contentType: "application/json",
    success: function (jsonData) {
        // Success callback
        alert("sucess");
    },
    error: function() {
        //any error to be handled
    }
 });

【讨论】：