Javascript 使用jQuery在本地系统中加载和解析JSON文件

我不熟悉脚本语言。我在谷歌上搜索过使用jQuery加载和解析JSON文件。我从堆栈溢出中得到了这些链接的帮助

  </div>
  <div id="list"></div>

我有一个名为

new.JSON

的JSON文件

 { "a": [
           {"name":"avc"},
           {"name":"Anna"},
           {"name":"Peter"},
           {"Folder": "ABC", "name":[
           {"name":"John"},
           {"name":"Anna"},
           {"Folder":"XYZ", "name":[ 

                     {"name":"fdgh"},
                     {"name":"hdfghh"},
                     {"Folder":"JKL", "name":[ 

                                {"name":"gdfgdfgggggg"},
                                {"name":"hddddddddddddddddddddddddddddh"},  
                                {"Folder":"PQR", "name":[ 

                                        {"name":"gddddddg"},
                                        {"name":"ddhh"}

                                       ]
                                  }
                             ]
                          }
                       ]
                    }
                 ]
              }
          ]
      }

  </div>
  <div id="list"></div>

这是我加载

new.json

文件的jQuery/JavaScript代码。我已将代码写入标记中

     <script src="jquery-3.1.0.js"></script>
      <script type="text/javascript" language="javascript"     src="C:\Users\Girish\Desktop\new.json"></script>
       <script type="text/javascript">
       var out="<ul>"; 
       var j=0;

       function functionName(event) {
             $('li[id^="foo"]').click(function(e){ 
                        e.stopPropagation();
                        var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
                        $('#list').html(x);
                        $("#list .hide").show();
             });
         }

    $(document).ready(function() {
        $('li[id^="foo"]').each(function() {
                $(this).on('click', {param: this.id}, functionName);
         }); 
    });

    function read(obj){

        for(var i = 0; i < obj.length; i++)
        {
            if(obj[i].Folder)
            {
               var name = "foo"+ ++j;
               var name2 = "<li id=" + name + ">";
               out = out+ name2 + obj[i].Folder + "<ul>";

               document.getElementById("tree").innerHTML = out;

               read(obj[i].name);
               out=out+"</ul></li></ul>";
            }
            else
            {
                 var name2 = "<li class=\"hide\">";
                 out = out+ name2 + obj[i].name;
                 document.getElementById("tree").innerHTML = out;
                 out=out+"</li>";
            }
          }
      }

     function show()
     {
       //read(a)
        var myItems;

        $.getJSON('new.json', function(data) {
        myItems = data.a;
        read(myItems)
     });

   }

 </script>

  </div>
  <div id="list"></div>

var out=“
”；
var j=0；
函数名（事件）{
$（'li[id^=“foo”]）。单击（函数（e）{
e、 停止传播（）；
var x=$（this）.last（）.find（'>ul'）.clone（）.find（'ul'）.remove（）.end（）；
$（'#list'）.html（x）；
$（“#list.hide”）.show（）；
});
}
$（文档）.ready（函数（）{
$（'li[id^=“foo”]”）。每个（函数（）{
$（this.on（'click'，{param:this.id}，functionName）；
}); 
});
函数读取（obj）{
对于（变量i=0；i”；
out=out+name2+obj[i]。文件夹+“
”；
document.getElementById（“树”）.innerHTML=out；
读取（obj[i].名称）；
out=out+“
”；
}
其他的
{
var name2=“
”；
out=out+name2+obj[i].名称；
document.getElementById（“树”）.innerHTML=out；
out=out+“
”；
}
}
}
函数show（）
{
//读（a）
var-myItems；
$.getJSON（'new.json'，函数（数据）{
myItems=data.a；
阅读（myItems）
});
}

这是

标签

  </div>
  <div id="list"></div>

  </div>
  <div id="list"></div>

  </div>
  <div id="list"></div>

当我在Google Chrome上运行此代码时。它给出了这个错误

  </div>
  <div id="list"></div>

jquery-3.1.0.js:9392

XMLHttpRequest

无法加载

file:///C:/Users/Girish/Desktop/new.json

。跨源请求仅支持协议方案：

http

、数据、chrome、chrome扩展、

https

、chrome扩展资源。在控制台上。我在谷歌上搜索了这个错误，发现了一些链接，上面写着在Mozilla Firefox上运行相同的文件

  </div>
  <div id="list"></div>

与我在Mozilla Firefox上运行的代码相同，它没有给出任何错误。它在

#树

div中显示项目。但当我单击

树

div中的任何项目时，它不会在

#列表

div中显示其子元素

  </div>
  <div id="list"></div>

现在我想在

Chrome

和

Firefox

上加载json文件。如何修复上述错误？

  </div>
  <div id="list"></div>

单击

树中的任何项目时，为什么子项目没有显示在
列表中
div？

  </div>
  <div id="list"></div>

谢谢
这与JQuery无关。如果在本地运行网页（URL开头有
file://
），则无法访问本地文件。它违反了本地运行页面的安全模型

  </div>
  <div id="list"></div>

您收到的错误与CORS（跨源资源共享）有关，它是一种广泛使用的安全机制，仅允许同一域上的客户端浏览器应用程序访问资源或API。任何超出受信任的CORS策略的内容都将被拒绝。在本地网页的情况下，文件被视为在您的来源之外；您的浏览器基本上认为您的硬盘驱动器位于不同的域上。否则，恶意脚本只需猜测访问路径即可轻松访问本地文件

  </div>
  <div id="list"></div>

要解决这个问题，您需要使用某种开发服务器（或完整的web服务器），以便您的页面可以在本地托管。然后您可以通过
http://localhost/
或您的本地IP地址，通常为
http://127.0.0.1/

  </div>
  <div id="list"></div>

可以承载静态文件的开发服务器的一些示例：

  </div>
  <div id="list"></div>


看起来是静态托管的一个不错的选择
如果安装了Python
Python-m SimpleHTTPServer
将在
http://localhost:8000/
在您启动它的任何文件夹中
似乎有很好的基于web的管理控制台

基本上，任何对
静态web服务器的搜索（使用您的操作系统）都会找到许多简单的选项。
这与JQuery无关。如果在本地运行网页（URL开头有
file://
），则无法访问本地文件。它违反了本地运行页面的安全模型

  </div>
  <div id="list"></div>

您收到的错误与CORS（跨源资源共享）有关，它是一种广泛使用的安全机制，仅允许同一域上的客户端浏览器应用程序访问资源或API。任何超出受信任的CORS策略的内容都将被拒绝。在本地网页的情况下，文件被视为在您的来源之外；您的浏览器基本上认为您的硬盘驱动器位于不同的域上。否则，恶意脚本只需猜测访问路径即可轻松访问本地文件

  </div>
  <div id="list"></div>

要解决这个问题，您需要使用某种开发服务器（或完整的web服务器），以便您的页面可以在本地托管。然后您可以通过
http://localhost/
或您的本地IP地址，通常为
http://127.0.0.1/

  </div>
  <div id="list"></div>

可以承载静态文件的开发服务器的一些示例：

  </div>
  <div id="list"></div>


看起来是静态托管的一个不错的选择
如果安装了Python
Python-m SimpleHTTPServer
将在
http://localhost:8000/
在您启动它的任何文件夹中
似乎有很好的基于web的管理控制台