首页 > 解决方案 > 使用 JavaScript 或 JQuery 跨站点获取 JSON 数据

问题描述

我正在尝试从以下 url获取一些 JSON 数据。我无法完成这项工作。

你看,我正在尝试通过 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>

没有什么可以解决这个问题。没有任何东西被退回。为什么?我不确定我做错了什么。我在上面附加的链接显示了我在这里查看的 API 的 Django 页面。

非常感激你的帮助!:)

编辑:

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}

标签: javascriptjqueryhtmljsonget

解决方案


检查控制台(右键单击页面然后检查元素)。你可能会看到这样的东西:

CORB 消息

似乎您遇到了专门设计的保护措施,以防止您尝试执行的操作,即从未知位置发送对页面数据的请求。我不是 CORB 方面的专家,但希望这能为您指明正确的方向。


推荐阅读