difference get and post ?

difference get and post ?

<html>
<head>
<title>Orders</title>
<style type="text/css">
ul li .edit{
  display: none;
}

ul li.edit .edit{
  display: initial;
}

ul li.edit .noedit{
  display: none;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

  $(document).ready(function(){

    $.ajax({
      type: 'GET',
      url: 'http://-get.php',
      dataType: 'json',
      success: function(data){
        $.each(data, function(key, value){
          var html = '<li>'+
          '<p><strong>Naam:</strong> <span class="noedit naam">'+ value.naam +'</span> <input class="edit naam" /></p>'+
          '<p><strong>Drank:</strong> <span class="noedit type">'+ value.type +'</span> <input class="edit type" /></p>'+
          '<p><strong>Prijs:</strong> <span class="noedit prijs">'+ value.prijs +'</span> <input class="edit prijs" /></p>'+
          '<button data-id="'+ key +'" class="verwijder">Verwijder</button>'+
          '<button data-id="'+ key +'" class="wijzig noedit">Wijzig</button>'+
          '<button data-id="'+ key +'" class="wijzigSave edit">Bewaar</button>'+
          '<button data-id="'+ key +'" class="wijzigStop edit">Annuleer</button>'+
          '</li>';
          $('#orders').append(html);
        });
      },
      error: function(){
        alert('Geen correcte URL!');
      }
    });

    $('#toevoegen').click(function(){
      var order = {
        naam: $('#naam').val(),
        type: $('#type').val(),
        prijs: $('#prijs').val()
      };

      $.ajax({
        type: 'POST',
        url: 'http--.php',
        data: order,
        success: function(){
          var html = '<li>'+
          '<p><strong>Naam:</strong> <span class="noedit naam">'+ value.naam +'</span> <input class="edit naam" /></p>'+
          '<p><strong>Drank:</strong> <span class="noedit type">'+ value.type +'</span> <input class="edit type" /></p>'+
          '<p><strong>Prijs:</strong> <span class="noedit prijs">'+ value.prijs +'</span> <input class="edit prijs" /></p>'+
          '<button data-id="'+ key +'" class="verwijder">Verwijder</button>'+
          '<button data-id="'+ key +'" class="wijzig noedit">Wijzig</button>'+
          '<button data-id="'+ key +'" class="wijzigSave edit">Bewaar</button>'+
          '<button data-id="'+ key +'" class="wijzigStop edit">Annuleer</button>'+
          '</li>';
          $('#orders').append(html);        },
        error: function(){
          alert('Geen correcte URL!');
        }
      });
    });

    $('#orders').delegate('.verwijder', 'click', function(){
      var parent = $(this).parent();
      $.ajax({
        type: 'GET',
        url: 'http://-.php?id='+ $(this).attr('data-id'),
        success: function(){
          parent.fadeOut();
        },
        error: function(){
          alert('Geen correcte URL!');
        }
      });
    });

    $('#orders').delegate('.wijzig', 'click', function(){
          var parent = $(this).parent();
          parent.find('input.naam').val( parent.find('span.naam').text() );
          parent.find('input.type').val( parent.find('span.type').text() );
          parent.find('input.prijs').val( parent.find('span.prijs').text() );
          parent.addClass('edit');
    });

    $('#orders').delegate('.wijzigStop', 'click', function(){
          $(this).parent().removeClass('edit');
    });

    $('#orders').delegate('.wijzigSave', 'click', function(){
          var parent = $(this).parent();

          var order = {
            naam: parent.find('input.naam').val(),
            type: parent.find('input.type').val(),
            prijs: parent.find('input.prijs').val(),
          };

          $.ajax({
            type: 'POST',
            url: 'http:/-.php',
            data: order,
            success: function(){
              parent.find('span.naam').text( parent.find('input.naam').val() );
              parent.find('span.type').text( parent.find('input.type').val() );
              parent.find('span.prijs').text( parent.find('input.prijs').val() );
            },
            error: function(){
              alert('Geen correcte URL!');
            }
          });

          parent.removeClass('edit');
    });

  });

</script>
</head>
<body>

<h1>Orders</h1>
<ul id="orders">
</ul>

<hr>

<h1>Order Toevoegen</h1>

Naam: <input type="text" id="naam" /><br />
Type: <input type="text" id="type" /><br />
Prijs: <input type="text" id="prijs" /><br />
<button id="toevoegen">Toevoegen</button>
</body>
</html>