Question

我是脚本语言的新手。我用google搜索使用jQuery加载和解析JSON文件。我已经从Stack Overflow获得了那些链接的帮助。

我有这个名为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"}

                                       ]
                                  }
                             ]
                          }
                       ]
                    }
                 ]
              }
          ]
      }

这是我加载new.json文件的代码jQuery / JavaScript代码。我在<script>标记内写了我的代码。

     <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>

这是<body>代码。

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

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

jquery-3.1.0.js:9392 XMLHttpRequest无法加载file:///C:/Users/Girish/Desktop/new.json。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。在控制台上。我搜索了这个错误，我发现一些链接说在Mozilla Firefox上运行相同的文件。

我在Mozilla Firefox上运行的代码相同，它没有给出任何错误。它显示#tree div中的项目。但是当我点击tree div中的任何项目时。它没有在#list div中显示其子元素。

现在我想在Chrome和Firefox上加载json文件。如何修复上述错误？

点击list div中的任何项目时，为什么子项目未在tree div中显示？

谢谢

Answer 1

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

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

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

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

Fenix Web Server看起来是静态托管的好选择
如果您安装了Python，python -m SimpleHTTPServer将在http://localhost:8000/上的任何文件夹中启动服务器
Mongoose似乎有一个不错的基于网络的管理控制台

基本上任何搜索static web server（使用您的操作系统）都应该找到很多简单的选项。

使用jQuery

1 个答案: