Différences

Ci-dessous, les différences entre deux révisions de la page.

--- lespetitshackers:nodejs:clienthtmldynamicjquery [2013/08/10 14:25] – créée christian.jacolot
+++ lespetitshackers:nodejs:clienthtmldynamicjquery [2024/04/16 22:26] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== Exemple Client HTML jQuery ======
+===== Création de la page HTML dynamique du client avec jQuery =====
+<code>
+<!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>
+</code>