Question

我尝试从导入的JSON文件创建动态列表，并继续收到错误“XMLHttpRequest无法加载。只有协议方案支持交叉源请求：http，数据，chrome，chrome扩展，https，chrome-extension-资源“。并且文件未加载。有人可以帮忙给一些提示。 THX！

这是我的js文件

$.getJSON( "recordingList.json", function( data ) {
    var values = [];

    for (var i = 1; i <= values.length; i++) {
        var value = values[i];
        var element = $($('#template').html());
        element.find('.date').html(value.date);
        element.find('.lan').html(value.lan);
        element.find('.topic').html(value.topic);
        element.find('.speaker').html(value.speaker);
        element.find('.play').attr('href', value.play);
        element.find('.download').attr('href', value.link);
        $('.list').append(element);
    };
});

HTML文件

<ul class="list">
    <script type = "text/template" id="template">
    <li class='list-item'>
    <span class='date'></span>
    <span class='lan'></span>
    <span class='topic'></span>
    <span class='speaker'></span>
    <a class ='play' title='Listen' href=""><i class='fa fa-play-circle-o'></i></a>
    <a class ='download' title='Download' href=""><i class='fa fa-download'></i></a>
    </li>
    </script>
</ul>

Answer 1

将您的网址更改为指向文件recordingList.json

的正确网址

之后为了将数据附加到列表中，您可以使用简单的字符串连接，然后在<ul>

中附加字符串

$.getJSON( "whatever/recordingList.json", function( data ) {
for (var i = 1; i <= data.length; i++) {
  var value = data[i];
  _html = "<li class='list-item'>"
    +"<span class='date'>"+value.date+"</span>"
    +"<span class='lan'>"+value.lan+"</span>"
    +"<span class='topic'>"+value.topic+"</span>"
    +"<span class='speaker'>"+value.speaker+"</span>"
    +"<a class ='play' title='Listen' href='"+value.play+"'><i class='fa fa-play-circle-o'></i></a>"
    +"<a class ='download' title='Download' href='"+value.link+"'><i class='fa fa-download'></i></a>"
    +"</li>";
    $('.list').append(_html);
    }
});

从导入的JSON文件

1 个答案: