关于JQuery加载本地JSON文件无法读取(权限不足的)解决

index.html文件

<h3>使用getJSON()方法异步加载JSON格式数据</h3>
    <div id="divtest2">
      <div class="title">
        <span class="fl1">我最喜欢的运动</span>
        <span class="fr1"><input type=button id="btnGetJSON" value="加载" /></span>
        
      </div>
      <ul id="ul2"></ul>
    </div>
    <script>
        $(function () {
            $("#btnGetJSON").bind("click", function () {
                var $this = $(this);
                $.getJSON("Data/sport.json", function (data) {
                    $this.attr("disabled", true);
                    $.each(data, function (index, sport) {
                            $("#ul2").append("<li>"+sport["name"]+"</li>");
                        });
                });
            });
        });
    </script>

sport.json

[{
  "name":"足球"
},{
  "name":"散步"
},{
  "name":"散步"
},{
  "name":"篮球"
},{
  "name":"乒乓球"
},{
  "name":"自行车"
}]

在Chrome运行后的错误图片：

解决方法：

同事告诉我，要将html，JS和JSON文件放到服务器目录下才能实现html访问JSON文件，在window文件夹目录下是不够权限加载JSON文件的，建议我使用HBuilder这个神器，（按照我的理解）它能够帮你虚拟一个服务器环境，然后这个问题就可以解决啦（妈妈再也不怕我前端攻城狮没服务器没发调试了）如下图，~~~

搞掂~

努力，努力，前端工程师~