Q:

Basic ajax, trying to POST data to local api file

I am following the instruction from https://www.youtube.com/watch?v=5nL7X1UMWsc&index=8&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_ and http://rest.learncode.academy/.
I am trying to POST data to my local API file.  
The code belows doesn't work with my localhost/api/friends file, but it works perfectly fine if I change the url to http://rest.learncode.academy/api/johnbob/friends. 
I checked the network under deverloper tool and it did POST the data, but the data is not written to the file, and it doesn't return the data that I just posted. 
$(function(){

    var $friends = $('#friends');

    $.ajax({    
        type: 'GET',
        url: 'http://localhost/ajax/api/friends',
        success: function(friends){
            console.log('succuess', friends);
            $.each(friends, function(i, friend){
                $friends.append('<li>id: ' + friend.id + ', name: ' + friend.name +', age: ' + friend.age + '</li>');
            });
        }
    });

    $('#add-friend').on('click', function(){
        var friend = {
            id: $id.val(),
            name: $name.val(),
            age: $age.val()
        };

        $.ajax({
            type: 'POST',
            url: 'http://localhost/ajax/api/friends',
            data: friend,
            success: function(newFriend){
                console.log('succuess', newFriend);
            } 
        });

    });

This is what my api/friends file looks like
[{"id":1,"name":"Will","age":33},{"id":2,"name":"Laura","age":27}]

The console log prints
succuess [{"id":1,"name":"Will","age":33},{"id":2,"name":"Laura","age":27}] 

It is not returning the data that I just POST to the file. 

A:

I don't know why the GET is working for localhost, but if you don't have anything running as a back-end the POST shouldn't work
Basically the JavaScript/JQuery is code running in your browser that can change the interface and can change your page dynamically, by adding/deleting things to/from parts of it when you click a button, for example. 
The server code is what sends you this html/javascript. 
And the server code would be the thing that has permission to write on databases/files to change their values or just get them and give them to you. 
With ajax you use js to get things dynamically from the server.  You send a request to the server, which runs the server code (and changes db values, if needed) and returns some information for the javascript code, which it uses to change how the website looks.