Jquery .ajax 获取对 json 响应的请求答案

【问题标题】：Jquery .ajax get request for a json responseJquery .ajax 获取对 json 响应的请求
【发布时间】：2015-04-28 21:54:43
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({
            type: 'GET',
            url:"http://bustime.mta.info/api/siri/vehicle-monitoring.json", 
            data: {key: '',
                OperatorRef:'MTA%20NYCT',
                LineRef:'B54',
                VehicleRef:'9531'   },
            dataType: 'json',
            async: false,
        success: function(result){
            $("#div1").html(result);
        }});
    });
});
</script>
</head>
<body>

<div id="div1">Let jQuery AJAX Change This Text</div>

<button>Get External Content</button>

</body>

</html>

嗨，我是 Javascript 和 Jquery 的新手，所以请原谅我的任何新手错误。我在这里尝试做的是向 mta api(http://bustime.mta.info/wiki/Developers/SIRIVehicleMonitoring) 发送一个 get 请求，并在用户单击按钮后简单地打印 json 响应。单击按钮时，代码没有打印出任何内容。任何人都可以检测到上面代码的问题吗？我会很感激的。

【问题讨论】：

查看浏览器的开发者工具。查看 JavaScript 控制台。它是否报告任何错误？查看“网络”选项卡。是否正在提出请求？它得到回应了吗？它们是否包含您期望的数据？你有一个success 函数，添加一个error 函数。
而不是 "$("#div1").html(result);"写警报（结果）；看看你得到了什么
请求的是同一个域吗？
您可能想从您的问题中删除该密钥，因为现在每个人都可以使用它。
可能因为它是一个跨域请求而被阻止。 F12 告诉我们控制台说什么（有什么错误吗？）

标签： javascript jquery ajax json get

【解决方案1】：

您需要将 dataType 更改为 jsonp 以避免 CORS 限制。

JSONP 是一种在 Web 浏览器中运行的 JavaScript 程序中使用的技术，用于从不同域中的服务器请求数据。通常，由于同源策略，Web 浏览器会禁止这样做。 Wikipedia 提供的描述比我所能提供的要好得多。 See here。在向 API 发出GET 请求时，您会经常遇到这种情况，因此值得了解。

jquery 代码允许您在控制台中查看 JSON 对象，然后您可以随意操作。我目前包含的方式会将 div 更改为 JSON 对象返回的时间戳。这个 jsfiddle 应该演示你在寻找什么 http://jsfiddle.net/zmxv2j7q/

        $(document).ready(function(){
          $("button").click(function(){
           $.ajax({
            type: 'GET',
            url:"http://bustime.mta.info/api/siri/vehicle-monitoring.json", 
            data: {key: '##################',
                OperatorRef:'MTA%20NYCT',
                LineRef:'B54',
                VehicleRef:'9531'   },
            dataType: 'jsonp',
            async: false,
            success: function(result){
            console.log(result.Siri)
            $("#div1").html(result);
            $("#div1").html(result.Siri.ServiceDelivery.ResponseTimestamp)
        }});
    });
});

【讨论】：

谢谢。我现在明白为什么我必须使用 jsonp 而不是 json 作为数据类型。我计划将返回的纬度和经度值保存到变量中并使用它们。你问我是否知道如何使用 JSON 响应。是否有您推荐的接收响应的特定方式？
@AlanH 我发现最好的方法是控制台记录返回的result，然后从那里开始使用它。您了解点符号如何访问 JSON 对象的属性吗？
不，我实际上是在查看您如何访问 responseTimeStamp 并且对它的简单程度感到惊讶。（我认为需要进行一些严格的解析..）通过查看您使用点符号的方式，我认为 Siri.ServiceDelivery.VehicleMonitoringDelivery.VehicleActivity.MonitoredVehicleJourney.VehicleLocation.Longitude 会给我我正在寻找的经度，但它是不返回任何东西。我在这里犯了其他错误吗？
@AlanH 所以我查看了注册 API 以便为您提供更好的指导，但它不起作用。在此之后我会再试一次，但是您上面的尝试不起作用的原因是因为您遇到的数组不适用于点表示法，而是基于array[0] 用于数组中的第一项等。所以如果您查看当您点击数组部分时返回的对象使用 this，当它返回到对象时再次使用点表示法。有意义吗？
我明白了。非常感谢保罗。看来我需要坐下来花点时间研究一下。