ПОЛУЧЕНИЕ данных JSON между сайтами с помощью JavaScript или JQuery
Я пытаюсь ПОЛУЧИТЬ данные JSON от следующий URL. У меня проблемы с выполнением этой работы.
Видите ли, я пытаюсь интегрировать школьное обеденное меню через NutriSlice. Мы используем систему цифровых вывесок под названием RiseVision, и у них есть виджет HTML. Это, конечно, означает, что я могу использовать только HTML и JavaScript, что усложняет мне задачу.
Мой код выглядит следующим образом:
<!DOCTYPE html>
<html>
<head lang = "en">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta charset = "UTF-8">
<script src = "https://code.jquery.com/jquery-2.2.0.js"></script>
</head>
<body>
<div>test</div>
<script>
$.ajax({type: "get",
url: "https://brf.nutrislice.com/menu/api/digest/school/black-river-falls-high-school/menu-type/lunch/date/2018/10/16/",
data: {method: "getQuote",format: "json",lang: "en"},
dataType: "jsonp",
jsonp: "jsonp",
jsonpCallback: "myJsonMethod"
});
function myJsonMethod(response){
$("div").append(" " + response);
}
</script>
</body>
</html>
Для этого ничего не работает. Ничего не возвращается. Почему? Я не уверен, что делаю не так. Ссылка, которую я прикрепил выше, показывает страницу Django для API, на который я здесь смотрю.
Ваша помощь очень ценится! :)
Обновлено:
var obj = jQuery.parseJSON( response );
$("div").append(" " + obj.menu_items[0]);
Дополнительные пояснения: вот пример JSON из нужных мне данных.
{"date":"2018-10-16","menu_items":["Taco Meat","Shredded Cheddar","Tortilla Chips","Tortilla Shell"],"images":["https://client-food-images.nutrislice.com/images/WD/WDeTEDdT2YDit97pdpUq7T/1474319790_787275__taco.jpg.1024x0_q85.jpg","https://client-food-images.nutrislice.com/images/eR/eRQamewxbJbFdAAbkUa5UK/1472157292_144997__ShrededCheddarCheese-IGH.jpg.1024x0_q85.jpg","https://client-food-images.nutrislice.com/images/4N/4NrHbqSdtFSa9HjQTM4WwT/1472157795_18851__tortillachips-m.jpg.1024x0_q85.jpg","https://client-food-images.nutrislice.com/images/wx/wx7bT4QGjLD8wNuK9oMtki/1473879858_737966__tortilla.jpg.1024x0_q85.jpg"],"holiday_text":null}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это будет работать
$.ajax({
type: "get",
url: "https://brf.nutrislice.com/menu/api/digest/school/black-river-falls-high-school/menu-type/lunch/date/2018/10/16/",
data: {
method: "getQuote",
format: "json",
lang: "en"
},
dataType: "json",
success: function(response) {
console.info(response); // check the console
$(".s").append(" " + response)// this will not work properly
}
});
имейте в виду, что вы пытаетесь добавить объект json в html-документ, который не будет хорошо отображаться, вам придется взять эти данные и использовать их таким образом, чтобы они правильно отображались в div
Ответ в успешном обратном вызове уже является json, вам не нужно его анализировать. Попробуйте использовать $ ("div"). Append ("" + response.menu_items);
Это не работает. Это меня сильно сбивает с толку, смеется. Я поместил рассматриваемый JSON в сообщение в качестве редактирования.
API, который вы вызываете, не разрешил междоменные вызовы. stackoverflow.com/questions/50873764/…
В документах говорится следующее: HTTP 200 OK Разрешить: GET, HEAD, OPTIONS Content-Type: application / json Vary: Accept
проверьте это, я могу сделать это из mi local, и я могу увидеть результат imgur.com/a/eZfNrsh
Проверьте консоль (щелкните правой кнопкой мыши на странице, затем проверьте элемент). Вероятно, вы увидите что-то вроде этого:
Кажется, вы столкнулись с защитой, специально разработанной для предотвращения того, что вы пытаетесь сделать, а именно отправки из неизвестного места запроса данных страницы. Я не эксперт по CORB, но надеюсь, что это укажет вам правильное направление.
Это определенно предназначено для доступа: / Я вижу некоторую информацию из заголовка в этой ссылке .... brf.nutrislice.com/menu/api/digest/school/…
Думаю, это ваш браузер. Посмотрите, как отключить CORB в любом браузере, который вы используете, и посмотрите, работает ли это? Может это поможет
- замените
dataType: "jsonp",наdataType: "json",. Это json, а не jsonp - убрать строчку
jsonp: "jsonp",или поменять наjsonp: false, - замените
jsonpCallback: "myJsonMethod"наsuccess: myJsonMethod. обязательно удалите двойные кавычки вокруг myJsonMethod. - в вашей функции myJsonMethod измените
$("div").append(" " + response);на$("div").append(" " + response.menu_items[0]);
Вы увидите на экране надпись «Test Taco Meat».
Хорошо, а почему что-то подобное не работает? (См. Редактирование в сообщении)