Question

这是一个简单的自动完成程序。读取在文本框中输入的值。我们可以在调试时看到它，但是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 +
                ' height="40" width="40" 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"
  }
]

Answer 1

等等，您是否要访问客户端计算机上的文件（显然是因为没有URL）？

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

以下是一些建议：

您可以将数据从JSON硬编码到JS对象中，然后将其作为脚本加载。
如果出于测试目的需要在计算机上模拟服务器，则可以使用Node和npm快速设置服务器：local-web-server 或只是谷歌如何设置本地主机服务器并选择你的毒药：）
从客户端计算机读取实际文件时，您可以获得的最接近的文件。我知道HTML5 fileReader工具确实允许您处理本地文件，但是这些必须必须由最终用户选择。

$ .GetJson（）无法从本地文件夹加载JSON文件

1 个答案: