使用 JavaScript 或 JQuery 跨站点获取 JSON 数据答案

【问题标题】：GETting JSON data cross-site using JavaScript or JQuery使用 JavaScript 或 JQuery 跨站点获取 JSON 数据
【发布时间】：2018-10-16 17:30:02
【问题描述】：

我正在尝试从the following 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}

【问题讨论】：

标签： javascript jquery html json get

【解决方案1】：

这会起作用

$.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.log(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 Allow: GET, HEAD, OPTIONS Content-Type: application/json Vary: Accept

【解决方案2】：

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

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

【讨论】：

它绝对是用来访问的：/我确实在这个链接中看到了一些标题信息......brf.nutrislice.com/menu/api/digest/school/…
我猜是你的浏览器。查看如何在您使用的任何浏览器中禁用 CORB 并查看是否有效？也许this 会有所帮助

【解决方案3】：

将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”。

【讨论】：