javascript - 如何访问我的 html 中的 json 数据

问题描述

我有一个基于 Eclipse 的应用程序，其中有一个 html 格式的欢迎页面。我在 html / javascript 中制作了一个图像滑块。

    <section...>
    <div class="slideshow-container">
      <!-- Full-width images with number and caption text -->
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img src="img/test.png" style="width:100%">
        <div class="text">Caption Text</div>
      </div>
 
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img src="img/test1.png" style="width:100%">
        <div class="text">Caption Two</div>
      </div>
 
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img src="img/test2.png" style="width:100%">
        <div class="text">Caption Three</div>
      </div>
 
      <!-- Next and previous buttons -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>
 
    <!-- The dots/circles -->
    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
</section>      
 
<script>
        var slideIndex = 1;
        showSlides(slideIndex);
        
        function plusSlides(n) {
          showSlides(slideIndex += n);
        }
        
        function currentSlide(n) {
          showSlides(slideIndex = n);
        }
        
        function showSlides(n) {
          var i;
          var slides = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("dot");
          if (n > slides.length) {slideIndex = 1}    
          if (n < 1) {slideIndex = slides.length}
          for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";  
          }
          for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";  
          dots[slideIndex-1].className += " active";
        }
</script>

它工作得很好！我是 javascript 的新手，所以我在互联网上发现了这段代码，结果证明它非常有效

更糟糕的是，当我要显示的图像要在 json 中获取时（json 不对我的失败负责，我也用 xml 进行了测试）我试过这个：在我的 html 中：

<section...>
    <a href="#" id="get-data">Get JSON data</a>
    <div id="show-data"></div>
    <script src="javascript/jquery-3.2.1.min.js"></script>
    <script src="example.js"></script>
</section>

在我的 example.js

$(document).ready(function () {
    var showData = $('#show-data');
 
    $.getJSON('test.json', function (data) {
      console.log(data);
 
      var items = data.items.map(function (item) {
        showData.text(item.value)
        return item.key + ': ' + item.value;
      });
 
      showData.empty();
 
      if (items.length) {
        var content = '<li>' + items.join('</li><li>') + '</li>';
        var list = $('<ul />').html(content);
 
        showData.append(list);
      }
    });
});

在 Eclipse 下我什么也得不到……突然间我寻找一种在 chrome 下“调试”的方法，它告诉我关于“跨源请求”的问题。我寻找它的用途，并根据我发现使用 --allow-file-access-from-files 选项启动 chrome 的建议，但没有任何帮助。我不明白这个错误，因为我在本地处理所有内容，我的 hmtl 就像我的 json 一样。我还尝试将我的 json 放在服务器上，没关系。

所以我有两个选择：

有人知道我如何绕过这个问题，我不能使用 php
我在java中处理json（我在java中更舒服，我通过javascript调用这个java函数）可能吗？我测试过，但我从未输入有问题的 java 函数我用它的插件名称 com.blabla.ClassName.MyFunction 调用这个函数，但我在网上找不到太多关于这个主题的信息，因此我认为这可能不是正确的道路

很抱歉这篇长篇文章，我在测试并进行了大量研究时试图做到详尽无遗！感谢您的关注

标签： javascriptjsoneclipse

javascript - 如何访问我的 html 中的 json 数据

问题描述

解决方案

推荐阅读