PHP – Mise à jour base de données MariaDB sans rechargement de page, avec AJAX.
Alors vous avez une page avec différents champs, et vous souhaitez que les utilisateurs puissent mettre à jour le formulaire sans rechargement de page ? Utilisons pour cela AJAX.
Par exemple une page comme ceci avec un grand nombre de lignes à mettre à jour:
Créons une table dans la base de données :
> CREATE TABLE abonnes (
abonne_id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(20),
age int,
verifie VARCHAR(2)
);Remplissons la table avec quels enregistrements :
> INSERT INTO abonnes (abonne_id, nom, age, verifie)
VALUES
(1, 'Michel', 44, 'on'),
(2, 'Sophie', 13, ''),
(3, 'Martin', 51, 'on'),
(4, 'Anita', 10, ''),
(5, 'Maxime', 23, 'on'),
(6, 'Sylvie', 39, 'on'),
(7, 'Germain', 42, ''),
(8, 'Bilel', 15, 'on'),
(9, 'Julie', 36, 'on'),
(10, 'Gaston', 101, '')
;On crée 2 scripts : abonnes.php et datasubmit.php
Script « abonnes.php » :
<html>
<head>
<title>Formulaire avec mise à jour de la base de données sans rafraichissement d'écran</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).on("keyup",".changable",function(event){
var datastring=$($(event.target).parent()).serialize();
console.log(datastring);
$.ajax({
dataType: "html",
type: "POST",
url: "datasubmit.php",
data: datastring,
success: function (data) {
}
});
return false;
});
$(document).on("change",".checkbox",function(event){
var datastring=$($(event.target).parent()).serialize();
console.log(datastring);
$.ajax({
dataType: "html",
type: "POST",
url: "datasubmit.php",
data: datastring,
success: function (data) {
}
});
return false;
});
</script>
</head>
<body>
<?php
// Connexion à la base de données
$database='masuperbase'; $sqluser='moi'; $sqlpass='monmotdepasse';
$dbh = new PDO("mysql:host=sqlserver;dbname=$database", $sqluser, $sqlpass);
// Chargement des enregistrements de la table "abonnes"
$requete="SELECT abonne_id, nom, age, verifie FROM abonnes";
$result = $dbh->query($requete);
foreach( $result as $row ) { // Un formulaire par abonné
echo "<form method=post name=loginform>";
echo "<input type=hidden name=abonne_id id=abonne_id value=$row[abonne_id] >";
echo "<input type=text class=changable name=nom id=nom value=$row[nom] >";
echo "<input type=text class=changable name=age id=age value=$row[age] >";
if ( $row['verifie'] =='on' ) { $checked='checked'; } else { $checked=''; }
echo "<input type=checkbox $checked class=checkbox name=verifie >";
echo '</form>';
}
?>
</body>
</html>Script « datasubmit.php » :
<?php
// --- Connexion à la base de données ---
$database='masuperbase'; $sqluser='moi'; $sqlpass='monmotdepasse';
$dbh = new PDO("mysql:host=sqlserver;dbname=$database", $sqluser, $sqlpass);
$abonne_id = $_POST['abonne_id'];
$nom = $_POST['nom'];
$age = $_POST['age'];
$verifie = $_POST['verifie'];
$requete = "
UPDATE abonnes SET nom='$nom', age='$age' ,verifie='$verifie' WHERE abonne_id='$abonne_id'
";
$stmt= $dbh->prepare($requete);
$stmt->execute();
?>
