<!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>