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

Question

I am trying to GET some JSON data from the following url . 我正在尝试从以下url获取一些JSON数据。 I am having trouble making this work. 我在进行这项工作时遇到了麻烦。

You see, I am trying to integrate the school's lunch menu through NutriSlice. 您知道，我正在尝试通过NutriSlice整合学校的午餐菜单。 We are using a digital signage system called RiseVision, and they have an HTML widget. 我们正在使用一个名为RiseVision的数字标牌系统，并且它们具有HTML小部件。 This, of course, means I can only use HTML and JavaScript - makes things more difficult for me. 当然，这意味着我只能使用HTML和JavaScript-对我来说事情变得更加困难。

My code is as follows: 我的代码如下：

    <!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>

Nothing ever works for this. 对此一无所有。 Nothing gets returned. 一无所获。 Why? 为什么？ I'm not sure what I am doing wrong. 我不确定自己在做什么错。 The link I attached above shows the Django page for the API I'm looking at here. 我上面附加的链接显示了我在这里查看的API的Django页面。

Your help is very much appreciated! 非常感激你的帮助！ :) :)

EDIT: 编辑：

var obj = jQuery.parseJSON( response );
    $("div").append(" " + obj.menu_items[0]);

Further clarification: Here is an example JSON from the data I need. 进一步说明：这是我需要的数据中的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}

Answer 1

This will work 这会工作

$.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
    }
});

keep in mind that you are trying to add a json object to an html document, that is not going to show well, you would have to take those data and use them in such a way that they are displayed correctly in the div 请记住，您试图将json对象添加到html文档中，但效果不佳，您必须获取这些数据并以正确显示在div中的方式使用它们

Answer 2

Check the console (right click on page then inspect element). 检查控制台（右键单击页面，然后检查元素）。 You will probably see something like this: 您可能会看到以下内容：

Seems you are running into a protection specifically designed to prevent what you are trying to do, which is to send, from an unknown location, a request for the page's data. 似乎您正在遇到一种专门设计用于防止您要尝试执行的保护的工作，即从未知位置发送对页面数据的请求。 I am not an expert on CORB but hopefully this points you in the right direction. 我不是CORB的专家，但希望这可以为您指明正确的方向。

Answer 3

change dataType: "jsonp", to dataType: "json", . 将dataType: "jsonp",更改为dataType: "json", It's json, not jsonp 它是json，不是jsonp
remove the line jsonp: "jsonp", or change to jsonp: false, 删除行jsonp: "jsonp",或更改为jsonp: false,
change jsonpCallback: "myJsonMethod" to success: myJsonMethod . 将jsonpCallback: "myJsonMethod"更改为success: myJsonMethod 。 make sure remove double quotes around myJsonMethod. 确保删除myJsonMethod周围的双引号。
in your myJsonMethod function, change $("div").append(" " + response); 在myJsonMethod函数中，更改$("div").append(" " + response); to $("div").append(" " + response.menu_items[0]); 到$("div").append(" " + response.menu_items[0]);

You will see 'test Taco Meat' on your screen. 您将在屏幕上看到“测试Taco Meat”。

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

问题描述

3 个解决方案

解决方案1
0 2018-10-16 17:49:18

解决方案2
0 2018-10-16 17:57:48

解决方案3
0 2018-10-17 00:14:19

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

问题描述

3 个解决方案

解决方案1 0 2018-10-16 17:49:18

解决方案2 0 2018-10-16 17:57:48

解决方案3 0 2018-10-17 00:14:19

解决方案1
0 2018-10-16 17:49:18

解决方案2
0 2018-10-16 17:57:48

解决方案3
0 2018-10-17 00:14:19