使用jQuery.getJSON获取JSON数据

Question

我正在尝试使用jquery获取json数据。

我正在使用.html，.js和.json文件，如下所示：

main.html中

<input type="button" id="getdata-button" value="Load Data" />
<div id="showdata"></div>

custom.js

$(document).ready(function() {
  $('#getdata-button').on('click',function() {
    jQuery.getJSON('data.json', function(data) {
        //alert('Im here');
        $('#showdata').append("<p>"+data.name+" "+data.email+"</p>");
    });
  });
})

data.json

{"email": "xxx@email.com", "name": "xyz"}

我的目录是：

  root
     main.html
     js/
       custom.js
       data.json

我甚至尝试将data.json放在根文件夹而不是js文件夹中（如果.json文件需要与.js位于同一文件夹中，我对此有疑问或者与.html在同一个文件夹中 - 因为我正在使用"data.json"之类的路径。我也提出警报，看看程序是否到了那个时候，但事实并非如此。它进入on 'click'函数但不通过getJSON函数。

为什么此代码不起作用的任何线索？我在这里遵循了一些教程和一些答案来达到这一点，但无法进一步。