如何将数据从JSON文件追加到HTML div？

Question

我正在尝试遍历JSON文件，并将“ sliderLink”的每个实例附加到预先存在的DIV中，但是似乎无法正常工作。

我在控制台中收到以下错误代码：

  

CORS策略已阻止从源“ null”访问“ http://www.coopertimewell.com/mainSlider.json”处的XMLHttpRequest：请求的资源上没有“ Access-Control-Allow-Origin”标头。

该如何解决？ 但这似乎在jsbin

中有效

<div class="custom-container">
</div>

<script>
    //populate timeline select menu
    $(document).ready(function() {
        $.ajax({
            url: 'http://www.coopertimewell.com/mainSlider.json',
            type: 'GET',
            dataType: "json",
            crossorigin: true,
            success: fillInFields
        });
    });

    function fillInFields(data) {
        var pictureURLArray = [];
        $.each(data, function(index, value) {
            pictureURLArray.push(value.sliderLink);
        });
        var lengthDatabase = Object.keys(data).length;
        for (i = 0; i < lengthDatabase; i++) {
            $(".custom-container").append(pictureURLArray[i]);
        }
    };

</script>

Answer 1

您应检查此请求的控制台（F12，然后选择“控制台”选项卡）

$.ajax({
    url: 'http://www.coopertimewell.com/mainSlider.json',
    type: 'GET',
    dataType: "json",
    crossorigin: true,
    success: fillInFields
});

如果出现以下错误：CORS策略已阻止从原点“ http://www.coopertimewell.com/mainSlider.json”访问“ http://localhost”处的XMLHttpRequest：上没有“ Access-Control-Allow-Origin”标头请求的资源。

您应该为Chrome安装Moesif Origin & CORS Changer扩展程序，并进行如下设置：

[]

之后，打开此扩展程序并尝试。

Answer 2

这是有关如何支持CORS的问题。您应该阅读以下问题：Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

无论如何，最简单的解决方法是更改​​dataType: "json" to "jsonp".

Answer 3

因此，事实证明实际的URL引起了问题。

仅需更改：

$(document).ready(function() {
  $.ajax({
    url: 'mainSlider.json',
    type: 'GET',
    dataType: "json",
    crossorigin: true,
    success: fillInFields
  });
});