Comment implémenter la fonction d'édition cliquer pour modifier en php

Avec le développement continu de la technologie de développement Web, de plus en plus d'applications Web doivent fournir aux utilisateurs frontaux la possibilité de modifier directement les données. Afin d'atteindre cet objectif, les développeurs doivent apprendre à utiliser PHP pour envoyer des requêtes pertinentes au serveur afin de mettre à jour, d'insérer ou de supprimer des données. La méthode présentée par cet article consiste à modifier les données directement dans le navigateur en cliquant sur le bouton Modifier, sans avoir besoin de sauter ou d'actualiser la page.

Répertoire

• Préparations pour la modification des données
• Réaliser l'édition par clic
• Traitement des données modifiées
• Code complet

Préparations pour la modification des données

Avant de commencer, vous devez confirmer que les données qui doivent être modifiées sont sur l'emplacement du serveur. Par exemple, si vous devez modifier un enregistrement dans une table nommée utilisateurs, vous pouvez utiliser le code suivant pour vous connecter à la base de données et interroger les données :

// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');

// 查询指定 ID 的用户数据
$id = $_GET['id'];
$stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();

Après avoir obtenu les données, vous devez les afficher sur la page Pour utilisateurs à modifier. Ce qu'il faut noter ici, c'est que nous devons ajouter un élément d'entrée pour chaque champ qui doit être modifié, et sa valeur doit être la valeur du champ actuel. Dans le même temps, ajoutez un bouton « Confirmer » après chaque élément de saisie pour permettre aux utilisateurs de soumettre des modifications.

<form action="update.php" method="post">
  <input type="hidden" name="id" value="<?php echo $user[&#39;id&#39;]; ?>">
  <label>用户名：</label>
  <input type="text" name="username" value="<?php echo $user[&#39;username&#39;]; ?>">
  <button type="submit">确认</button>
</form>

Implémentez le clic pour éditer

Pour que les utilisateurs puissent cliquer sur le bouton d'édition, nous devons ajouter un lien « modifier » et ouvrir le formulaire d'édition lorsque nous cliquons dessus. JavaScript est utilisé ici pour implémenter cette fonctionnalité.

Tout d'abord, nous devons ajouter un écouteur d'événement de clic pour le lien "Modifier" et appeler la fonction showEditor lorsque l'utilisateur clique :

<a href="#" onclick="showEditor()">修改</a>

Ensuite, nous devons définir la fonction showEditor et y créer un élément de formulaire pour l'édition par l'utilisateur. Données :

function showEditor() {
  var form = document.createElement('form');
  form.method = 'post';
  form.action = 'update.php';
  form.innerHTML = `
    <input type="hidden" name="id" value="<?php echo $user[&#39;id&#39;]; ?>">
    <label>用户名：</label>
    <input type="text" name="username" value="<?php echo $user[&#39;username&#39;]; ?>">
    <button type="submit">确认</button>
  `;
  document.body.appendChild(form);
}

Ce qu'il faut noter ici, c'est qu'après avoir créé l'élément de formulaire, nous devons également l'ajouter à la page (ici à l'élément body) pour garantir que les utilisateurs peuvent voir et modifier le contenu.

Traitement des données modifiées

Après que l'utilisateur ait cliqué sur le bouton "Confirmer", les données du formulaire seront soumises au fichier update.php du serveur pour les opérations de mise à jour des données. Ici, nous devons d'abord obtenir les données du formulaire et utiliser PDO pour exécuter une instruction de mise à jour :

// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');

// 获取表单数据
$id = $_POST['id'];
$username = $_POST['username'];

// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);

Après avoir terminé la mise à jour des données, nous pouvons rediriger l'utilisateur vers d'autres pages si nécessaire, ou afficher une invite « modification réussie » sur la page actuelle. .

echo '修改成功！';

Code complet

L'exemple de code est le suivant :

prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();
?>
<a href="#" onclick="showEditor()">修改</a>

<script>
// showEditor 函数
function showEditor() {
  var form = document.createElement('form');
  form.method = 'post';
  form.action = 'update.php';
  form.innerHTML = `
    &lt;input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;&lt;?php echo $user[&amp;#39;id&amp;#39;]; ?&gt;&quot;&gt;
    &lt;label&gt;用户名：&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;username&quot; value=&quot;&lt;?php echo $user[&amp;#39;username&amp;#39;]; ?&gt;&quot;&gt;
    &lt;button type=&quot;submit&quot;&gt;确认&lt;/button&gt;
  `;
  document.body.appendChild(form);
}
</script>

<!-- update.php -->
<?php
// 连接数据库
$pdo = new PDO(&#39;mysql:host=localhost;dbname=test&#39;, &#39;username&#39;, &#39;password&#39;);

// 获取表单数据
$id = $_POST[&#39;id&#39;];
$username = $_POST[&#39;username&#39;];

// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);

// 显示成功消息
echo '修改成功！';
?>

Dans cet article, nous avons appris comment modifier les données directement dans le navigateur en cliquant sur le bouton Modifier. Il convient de noter que afin de garantir la sécurité des données, nous devons ajouter une logique de vérification nécessaire au code pour éviter les risques de sécurité inutiles. Enfin, j'espère que cet article pourra être utile aux développeurs Web PHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!