autre exemple AJAX, soumission form en POST

css/styles.css

@@ -224,6 +224,7 @@ button {
 .green {
   background: #4b2;
 }
+textarea,
 select,
 input {
   border: 1px solid #ddd;  

exemples/ajax-envoi-formulaire-par-post/contenu.html

@@ -0,0 +1,11 @@
+<h1>AJAX - Envoi formulaire par POST</h1>
+
+<p>Presque la même chose que l'exemple précédent !</p>
+<form id="ajax-form-post" method="POST" action="/ajax-form-post">
+    <input type="text" name="title" placeholder="Titre" /><br>
+    <textarea name="text" rows="10" placeholder="Collez du texte"></textarea><br>
+    <input type="submit" class="btn btn-primary" value="Envoyer" />
+</form>
+
+<h5>Résultat (HTML) renvoyé par le serveur:</h5>
+<div id="ajax-html"></div>

exemples/ajax-envoi-formulaire-par-post/script.js

@@ -0,0 +1,29 @@
+$.ajaxSetup({
+    headers: {
+        'content-type': 'application/x-www-form-urlencoded'
+    }
+});
+
+
+$('#ajax-form-post').submit(function(e) {
+    e.preventDefault();
+    var form = $(this);
+    var title = form.find('input[name="title"]').val();
+    var text = form.find('textarea[name="text"]').val();
+    $.ajax({
+        method: 'POST',
+        url: form.prop('action'),
+        data: {
+            title: title, text: text
+        },
+        success: function(data) {
+            console.log('received', data);
+            $('#ajax-html').html(data);
+        },
+        error: function(jqXHR) {
+            console.log('received', jqXHR);
+            $('#ajax-html').html(jqXHR);
+        },
+        dataType: 'html'
+    });
+});

exemples/liste.json

@@ -19,5 +19,6 @@
     "title": "Validation de formulaires Bootstrap"
   },
   { "slug": "ajax-exemple-simple", "title": "AJAX - Exemple simple" },
-  { "slug": "ajax-envoi-formulaire-par-get", "title": "AJAX - Envoi formulaire par GET" }
+  { "slug": "ajax-envoi-formulaire-par-get", "title": "AJAX - Envoi formulaire par GET" },
+  { "slug": "ajax-envoi-formulaire-par-post", "title": "AJAX - Envoi formulaire par POST" }
 ]

sandboxApp.js

@@ -10,6 +10,7 @@ var examples     = require(examplesJSON);
 
 app.use(express.static(__dirname));
 app.use(bodyParser.json());
+app.use(bodyParser.urlencoded());
 
 function addExample(slug, title) {
   examples.push({ slug: slug, title: title });

server.js

@@ -13,6 +13,8 @@ var app = require('./sandboxApp');
  */
 
 // 1er exemple: envoie du HTML généré dynamiquement.
+// On utilise app.get pour attacher un gestionnaire à l'URL /ajax-example
+// uniquement avec la méthode GET
 app.get('/ajax-example', function(req, res) {
   var date = new Date();
   var exampleHtml = '<p>Un peu de HTML retourné par le serveur.</p>' +
@@ -21,6 +23,7 @@ app.get('/ajax-example', function(req, res) {
 });
 
 // 2ème exemple : envoi formulaire par méthode GET
+// Notez bien d'où on extrait les paramètres passé par le client (req.query)
 app.get('/ajax-form-get', function(req, res) {
   var name = req.query.name;
   var birthdate = req.query.birthdate;
@@ -29,6 +32,15 @@ app.get('/ajax-form-get', function(req, res) {
   res.send(exampleHtml);
 });
 
+// 3ème exemple : envoi formulaire par méthode POST
+// Ici les paramètres viennent de req.body
+app.post('/ajax-form-post', function(req, res) {
+  var title = req.body.title;
+  var text = req.body.text;
+  var exampleHtml = '<h2>' + title + '</h2>' +
+    '<p>' + text + '</p>';
+  res.send(exampleHtml);
+});
 
 
 /**