$.GetJson() 无法从本地文件夹加载 JSON 文件

Posted 2023-02-27

技术标签:

【中文标题】$.GetJson() 无法从本地文件夹加载 JSON 文件【英文标题】：$.GetJson() fails to load JSON file from local folder 【发布时间】：2019-05-30 20:23:03 【问题描述】：

这是一个简单的自动完成程序。读取文本框中输入的值。我们可以在调试时看到它，但 GetJson() 属性无法获取 JSON 文件。因此程序无法执行。

我的代码如下

javascript 代码 getJson 属性无法获取文件。附加到问题的屏幕截图 html、CSS 和 JavaScript 在一个文件中。其名为 Search_Web.html

<script>
 

 $(document).ready(function() 
    $("#search").keyup(function() 
      $("#result").html("");

      var searchField = $("#search").val();
      var expression = new RegExp(searchField, "i");
      $.getJSON("data.json", function(data) 
        $.each(data, function(key, value) 
          if (value.name.search(expression) != -1 || value.location.search(expression) != -1) 
            $("#result").append(
              '<li class="list-group-item><img src = "" ' +
                value.image +
                '   class="img-thumbnail" /> ' +
                value.name +
                ' |<span class= "text-muted"> ' +
                value.location +
                '</span></li>"'
            );
          
        );
      );
    );
  );
</script>

<style>
  #result 
    position: absolute;
    width: 100%;
    max-width: 870px;
    cursor: pointer;
    overflow-y: auto;
    max-height: 400px;
    box-sizing: border-box;
    z-index: 1001;
  

  .link-class:hover 
    background-color: #f1f1f1;
  
</style>

<!DOCTYPE html>
<html>
  <head>
    <title>Search Operation</title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="#" />

    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"
    ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script
      src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
      integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
      crossorigin="anonymous"
    ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  </head>
  <body>
    <br />
    <br />

    <div class="container" style="width:900px;">
      <h2 align="center">JSON Live Data Search using AJAX and Jquery</h2>
      <h3 align="center">Player Data</h3>
      <br />
      <br />
      <div>
        <input type="text" name="search" id="search" placeholder="Search Player Details" class="form-control" />
      </div>
      <ul class="list-group" id="result"></ul>
    </div>
  </body>
</html>

JSON 文件 data.json

Browser Console 我附上了我认为错误发生位置的屏幕截图。我已经在堆栈溢出中烧毁了有关此问题的所有答案。没有人帮助过我。我希望我能解决这个问题。我仍然在学习。请原谅蚂蚁愚蠢的错误。任何帮助都深表感谢。

[
  
    "name": "Joe Augus",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\joe.jpg",
    "location": "Kochi,India"
  ,
  
    "name": "Ronaldo",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\ronaldo.jpg",
    "location": "Turin,Spain"
  ,
  
    "name": "Messi",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\messi.jpg",
    "location": "Barcelona,Spain"
  ,
  
    "name": "Pogba",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\pogba.jpg",
    "location": "Manchester,UK"
  ,
  
    "name": "Rashford",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\rashford.jpg",
    "location": "Manchester,UK"
  ,
  
    "name": "Kroos",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\kroos.jpg",
    "location": "Madrid,Spain"
  ,
  
    "name": "Modric",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\modric.jpg",
    "location": "Madrid,Spain"
  ,
  
    "name": "Mbappe",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\mbappe.jpg",
    "location": "Paris,France"
  ,
  
    "name": "Neymar",
    "image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\neymar.jpg",
    "location": "Paris,France"
  
]

【问题讨论】：

我认为您的解决方案很好，我尝试将其放在代码框示例中：codesandbox.io/s/p9oy5v367m，看起来它在 AJAX 方面工作正常。虽然 index.html 和 data.json 需要在服务器上保持在一起。 "浏览器控制台我附上了我认为错误发生位置的屏幕截图。" — 该屏幕截图中没有错误消息。这应该可以正常工作，只要您可以从 URL http://localhost:60001/data.json 访问该文件。如果您在浏览器中打开该网址会怎样？是什么让你说get请求失败？ 【参考方案1】：

等一下，您是否正在尝试访问客户端计算机上的文件（显然因为您没有 URL）？

这行不通，但是出于安全原因，您尝试一下！ 想象一下，如果我可以创建一个网站来搜索您的磁盘中的文件并将它们上传给我。那会不会很可怕？你确定你需要来自客户机器的文件吗？您是否只是想从服务器获取 JSON 而忘记输入 URL？您必须知道 JS 是在客户端机器（具体是浏览器）上执行的，而不是在服务器上执行的。您将如何确保浏览您页面的每个人都拥有上述文件？

以下是一些建议：

您可以将 JSON 中的数据硬编码到 JS 对象中，然后将其作为脚本加载。

如果您需要在您的机器上模拟一台服务器以进行测试，您可以使用 Node 和 npm 快速设置：local-web-server 或者简单地谷歌如何设置本地主机服务器并选择你的毒药:)

从客户端机器上读取实际文件最接近它。我知道 HTML5 fileReader 工具确实允许您处理本地文件，但这些必须由最终用户选择。

【讨论】：

虽然这可能是相关的，但我在问题中没有看到任何迹象表明他们正在尝试在客户端上打开文件。事实上，由于他们将文件的内容描述为自动完成数据，所以我严重怀疑他们是否希望该文件驻留在用户的机器上。 script标签是HTML标签吗？在其中，有一个 $.getJSON("data.json" ... 如果文件是远程文件或者我遗漏了什么，应该有 URL？我想你是。如果它只是一个文件名，那么它与正在运行脚本的 html 文件的位置有关。在 OP 发布的示例中，该文件需要位于 http://localhost:60001/data.json，然后应该一切正常。此外，如果他们试图打开一个客户端文件，它肯定需要一个完整的 Url，但该 Url 必须以 file:// 开头（如你所说，这行不通）。选项 1 不是答案。选项3与这个问题无关。选项 2 不相关。他们已经在本地服务器上运行它。查看标题为 Browser Console 的链接屏幕截图，并注意 URL。这也是为什么我 99.99% 确定他们没有尝试从客户端读取文件的原因。我已经向您解释过文件名data.json 与调用它的位置相关，并且我已经为您提供了它希望在其上找到该文件的 URL。抱歉，这个答案完全不正确。

以上是关于$.GetJson() 无法从本地文件夹加载 JSON 文件的主要内容，如果未能解决你的问题，请参考以下文章

JQuery $.getJSON 加载本地 JSON 文件不起作用

GetJSON 从 URL 到 d3.js 图表

无法从 React.js 中的本地库加载图像

HTML5怎么读取json文件

使用 jQuery $.getJSON() 从 Vuejs 方法中的本地 json 文件获取数据

jQuery $.getJSON 不返回键值对