Question

<!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＆amp;的新手。 Jquery所以请原谅我任何新手的错误。我在这里尝试做的是向mta api（http://bustime.mta.info/wiki/Developers/SIRIVehicleMonitoring）发送一个get请求，只需在用户单击按钮后打印json响应即可。单击按钮时代码不打印任何内容。任何人都可以使用上面的代码检测到问题吗？我会很感激。

Answer 1

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

JSONP是一种在Web浏览器中运行的JavaScript程序中使用的技术，用于从不同域中的服务器请求数据。通常，由于同源策略，Web浏览器禁止这样做。维基百科提供了比我更好的描述。 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)
        }});
    });
});

Jquery .ajax获取json响应的请求

1 个答案: