2015-04-28 6 views
1
<!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) и просто просто распечатать ответ json, как только пользователь нажмет кнопку. Код не печатает ничего при нажатии кнопки. Может ли кто-нибудь обнаружить проблему с кодом выше? Я был бы очень признателен.Jquery .ajax получить запрос на ответ JSon

+3

Посмотрите на инструменты разработчика вашего браузера. Посмотрите на консоль JavaScript. Сообщает ли он о каких-либо ошибках? Посмотрите вкладку «Сеть». Выполняется ли запрос? Получает ответ? Они содержат данные, которые вы ожидаете? У вас есть функция 'success', добавьте функцию' error'. – Quentin

+0

вместо "$ (" # div1 "). Html (result);" написать предупреждение (результат); и посмотреть, что вы получаете –

+2

Является ли запрос к тому же домену? –

ответ

2

Вам необходимо изменить dataType на jsonp, чтобы избежать ограничения CORS.

JSONP - это метод, используемый в программах JavaScript, работающих в веб-браузерах, для запроса данных с сервера в другом домене. Обычно это запрещено веб-браузерами из-за политики одного и того же происхождения. Википедия дает гораздо лучшее описание, чем я мог. See here. Когда дело доходит до принятия GET запросов API, это то, с чем вы столкнетесь регулярно, поэтому стоит знать.

Код 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) 
     }}); 
    }); 
}); 
+0

Спасибо. Теперь я понимаю, почему я должен использовать jsonp вместо json для dataType. Я планирую сохранить значения широты и долготы, возвращаемые в переменные, и играть с ними. Вы спросили меня, знаю ли я, как работать с ответом JSON. Существует ли конкретный способ получения ответа, который вы бы рекомендовали? –

+1

@AlanH Я нахожу, что лучший способ - console.log вернуть '' 'result''' и поиграть с ним оттуда. Вы понимаете, как работает точечная нотация для доступа к свойствам объекта JSON? –

+0

Нет, я действительно смотрел, как вы обращались к responseTimeStamp и был удивлен, насколько это было легко. (Я думал, что нужен серьезный синтаксический анализ ..) Посмотрев на то, как вы использовали точечную нотацию, я подумал, что Siri.ServiceDelivery.VehicleMonitoringDelivery.VehicleActivity.MonitoredVehicleJourney.VehicleLocation.Longitude даст мне долготу, которую я ищу, но это не возвращая ничего. Есть ли другая ошибка, которую я здесь делаю? –

Смежные вопросы