title: Having difficulty posting from a sample REST API to my local host
body: <p>Everytime I click the add-friend button, my REST data doesn't post on my localhost. I'm thinking I put the settings in wrong. But not sure where I went wrong.</p>
  
  <p>Here's the link to the RESTful API:
  <a href="http://rest.learncode.academy/" rel="nofollow">http://rest.learncode.academy/</a></p>
  
  <p>Here's the HTML code:</p>
  
  <pre><code>&lt;h1&gt;jQuery Ajax&lt;/h1&gt;
          &lt;h2&gt;Friends&lt;/h2&gt;
  
          &lt;ul id="friends"&gt;
  
          &lt;/ul&gt;
  
          &lt;h4&gt;Add a Friend&lt;/h4&gt;
          &lt;p&gt;name: &lt;input type="text" id="name"&gt;&lt;/p&gt;
          &lt;p&gt; age: &lt;input type="text" id="age"&gt;&lt;/p&gt;
          &lt;button id="add-friend"&gt;Add!&lt;/button&gt;
  </code></pre>
  
  <p>Here's the JS code:</p>
  
  <pre><code>$(function(){
  var $friends = $('#friends');
  var $name = $('#name');
  var $age = $('#age');
  
  $.ajax({
      type: 'GET',
      url: 'http://rest.learncode.academy/api/johnbob/friends',
      success: function(friends){
          $.each(friends, function(i, friend){
              $friends.append('&lt;li&gt;name: '+friend.name+' , age: '+friend.age+' &lt;/li&gt;');
  
  
          })
  
      },
      error: function(){
          alert('error loading errors');
      }
  });
  
  $('#add-friend').on('click', function(){
      var friend = {
          name: $name.val(),
          age: $age.val(),
      };
  
      $.ajax({
          type: 'POST',
          url: 'http://rest.learncode.academy/api/johnbob/friends' ,
          data: {name: 'Billy Bob', age: 27},
          success: function(data){
              $friend.append('&lt;li&gt;name: '+ data.name +', age: '+ data.age + '&lt;/li&gt;');
  
          }
      });
  
  
  });
  </code></pre>
  
  <p>}); </p>