javascript - 无法从URL加载JSON数据并以HTML格式显示 - Thinbug

无法从URL加载JSON数据并以HTML格式显示

时间：2018-04-08 01:39:58

标签： javascript jquery html json getjson

我正在尝试创建一个HTML / JavaScript程序，它读取外部JSON文件（通过URL），然后以一个很好的列出顺序将它们输出到网页。

我已经做了好几天了，我似乎无法通过Internet Explorer控制台中弹出的错误。错误是：

SEC7120：在Access-Control-Allow-Origin标头中找不到Origin（我的azure webapp URL）。（我的节目名称）

SCRIPT7002：XMLHttpRequest：网络错误0x80700013，由于错误80700013无法完成操作。

我能够通过'console.log（data）'读取第一个URL并在控制台中读取，但这只是因为它与我的代码在同一个源域中。两者都在我的Azure webapp git目录中。我怎样才能通过URL中的其他外部JSON文件？我必须从他们自己的webapps中读取所有同学。非常感谢任何帮助，我真的很痛苦。我有一种感觉，我需要使用JSONp，因此使用$ .ajax（）而不是$ .getJSON（）。我正在使用JQUERY。我的代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Klump Test</h1>
<p><input onclick="AddStudent()" type="button" value="Add Student"/></p>

<script>
var urls = ["https://michael-pedzimaz-webapp.azurewebsites.net/my-information.json",
            "https://jakeisalsoclueless.azurewebsites.net/myinformation.json",
            "https://riotjuice.azurewebsites.net/my-information.json",
            "https://softwareengjmh.azurewebsites.net/format.JSON",
            "https://newtestdocument.azurewebsites.net/Format.json"];

function AddStudent(){
    var person = prompt("Please enter your json url:", "");
    //var _person = person + '?callback=?';
    getJson(person);
 }
</script>

<input onclick="getJson(urls[0])" type="button" value="Mike's JSON"/>
<input onclick="getJson(urls[1])" type="button" value="Jake's JSON"/>
<input onclick="getJson(urls[2])" type="button" value="Julian's JSON"/>
<input onclick="getJson(urls[3])" type="button" value="Jace's JSON"/>
<input onclick="getJson(urls[4])" type="button" value="Thad's JSON"/>

<div class="mypanel"></div>

<script>
function getJson(url){
    $.getJSON(url, function(data){
        console.log(data);
        var info = 'First name: ${data.FirstName}<br> Last Name: ${data.LastName}<br> Preferred Name: ${data.PreferredName}<br> Team Name: ${data.TeamName}<br> Seat Location: ${data.SeatLocation}<br> Role: ${data.Role}<br>'

        $(".mypanel").html(info);
    });
}
</script>
</body>
</html>

如何格式化所有JSON文件：

{
"FirstName":"Michael",
"LastName":"Pedzimaz",
"PreferredName":"Mike",
"TeamName":"The Ocelots",
"SeatLocation":"1-2",
"Role":["UI Designer"]
}

感谢您提前提供任何帮助。

1 个答案:

答案 0 :(得分：0)

您正在使用jsonp正确的轨道 - 但是，您要求的服务器需要支持jsonp才能真正了解？回调网址参数。

azurewebsite.net将需要支持CORS（添加额外的标头以让您获取JSON）或jsonp。