Getting JSON data using $.post method

Getting JSON data using $.post method

Hi,
I'm learning Ajax. Right now I'm trying to catch some data from a json file and show them using $.post.
However following code is not working.
The same code works if I use $.getJSON instead of $.post.
I know how to bring it to work with $.ajax but I'm keen to know why it doesn't work with $.post ?

HTML:
  2.   <main role="main">
  3.       <button class="btn">Show Data</button>
  4.       <div id="content"></div>
  5.   </main>

JSON (data.josn)
  2. [
  3.   {
  4.     "name":"Barot Bellingham",
  5.     "shortname":"Barot_Bellingham",
  6.   },
  7.   {
  8.     "name":"Jonathan G. Ferrar II",
  9.     "shortname":"Jonathan_Ferrar",
  10.   },
  11.   {
  12.     "name":"Hillary Hewitt Goldwynn-Post",
  13.     "shortname":"Hillary_Goldwynn",
  14.   }
  15. ]

jQuery
  2. $(function() {
  3. $('.btn').on('click', function() {
  4.   $.post('data.json', function(data) {
  5.     var output = "<ul class='result'> ";
  6.     $.each(data, function(key, val) {
  7.       output += "<li>";
  8.       output += val.name;
  9.       output += "</li>";
  10.     });
  11.     output += "</ul>";
  12.     $("#content").html(output);
  13.   });
  14. });
  15. });

Thanks