TP5 : ajout d'un formulaire avec requête AJAX

f8c67fc6 · Nawreua · 15d2eed2 · f8c67fc6 · f8c67fc6 · f8c67fc6
Commit f8c67fc6 authored 1 month ago by Nawreua
--- a/actions/get.php
+++ b/actions/get.php
-<?php require_once(__DIR__.'/../static/php/head.php'); ?>
-<?php echo htmlspecialchars($_GET['name']).' | Score : '; ?>
-<?php $score = $ddb->query('
+<?php
+require_once(__DIR__.'/../config/config.php');
+
+$score = $ddb->query('
  SELECT score FROM users WHERE name = \''.$_GET['name'].'\'
 ')->fetch();
-  echo $score[0]
+
+echo htmlspecialchars($_GET['name']).' | Score : '.$score[0]
 ?>
--- a/pages/pageForm.php
+++ b/pages/pageForm.php
 <?php require_once(__DIR__.'/../static/php/head.php'); ?>
 <body>
  <?php require_once(APP_ROOT.'/static/php/navbar.php'); ?>
+  <!-- Formulaires classiques -->
  <form action="/actions/post.php" method="post">
    <label for="name"><?php echo $trad['form_name'][$lang]; ?></label>
    <input name="name" id="name" type="text">
@@ -17,4 +18,17 @@

    <button type="submit"><?php echo $trad['search'][$lang]; ?></button>
  </form>
+  <br>
+  <!-- Formulaire AJAX -->
+  <script src="/static/js/ajax.js"></script>
+  <div>
+    <form onsubmit="submitFormGetAjax(this)">
+      <label for="name"><?php echo $trad['form_name'][$lang]; ?></label>
+      <input name="name" id="name" type="text">
+
+      <button type="submit"><?php echo $trad['search'][$lang]; ?></button>
+    </form>
+    <br>
+    <label id="result"></label>
+  </div>
 </body>
--- a/static/js/ajax.js
+++ b/static/js/ajax.js
+function submitFormGetAjax(form) {
+  event.preventDefault();
+
+  var request = new XMLHttpRequest();
+  request.onreadystatechange = function() {
+    // uniquement en cas de requête envoyée et réussie
+    if (this.readyState == 4 && this.status == 200)
+      document.getElementById("result").innerHTML = request.responseText;
+  };
+
+  let name = encodeURIComponent(form.name.value.trim());
+
+  request.open("GET", "/actions/get.php?name=" + name, true);
+  request.send();
+}
--- a/static/js/blogfolio.js
+++ b/static/js/blogfolio.js