<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Client REST</title> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type='text/javascript'> var url = "http://localhost:8080/liste"; function lireliste() { $.get(url, function(data) { $('#liste').html(data); console.log('la liste est chargée.'); }); } function ajouter() { var itemajouter = $("#ajout").val(); var sendInfo = { "item": itemajouter}; $.post(url, sendInfo); console.log("l'item a été ajouté à la liste."); } function enlever() { var itemajouter = $("#suppression").val(); var sendInfo = { "item": itemajouter}; $.ajax( { type: "DELETE", url: url, data: sendInfo } ); console.log("l'item a été supprimé à la liste."); } </script> </head> <body> <button onClick="ajouter()">Ajouter un mémo à ma liste</button><INPUT id="ajout" TYPE="text" NAME="ajout" VALUE="pain"> <div id="ajouteritem"></div> <p></p> <button onClick="enlever()">Enlever un mémo de ma liste</button><INPUT id="suppression" TYPE="text" NAME="enleve" VALUE="lait"> <div id="enleveritem"></div> <p></p> <button onClick="lireliste()">Lire ma liste de mémos</button><div id="liste"></div> </body> </html>