So implementieren Sie die Click-to-Modify-Bearbeitungsfunktion in PHP

Mit der kontinuierlichen Weiterentwicklung der Webentwicklungstechnologie müssen immer mehr Webanwendungen Front-End-Benutzern die Möglichkeit bieten, Daten direkt zu bearbeiten. Um dieses Ziel zu erreichen, müssen Entwickler lernen, wie sie mit PHP relevante Anfragen an den Server senden, um Daten zu aktualisieren, einzufügen oder zu löschen. Die in diesem Artikel vorgestellte Methode besteht darin, die Daten direkt im Browser zu ändern, indem Sie auf die Schaltfläche „Bearbeiten“ klicken, ohne dass die Seite springen oder aktualisieren muss.

Verzeichnis: Vorbereitungen für die Datenänderung am Serverstandort. Wenn Sie beispielsweise einen Datensatz in einer Tabelle mit dem Namen „Benutzer“ bearbeiten müssen, können Sie den folgenden Code verwenden, um eine Verbindung zur Datenbank herzustellen und die Daten abzufragen:

// 连接数据库
$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();

Nachdem Sie die Daten erhalten haben, müssen Sie sie auf der Seite in For rendern Benutzer zum Bearbeiten. Hier ist zu beachten, dass wir für jedes Feld, das bearbeitet werden muss, ein Eingabeelement hinzufügen müssen, dessen Wert der Wert des aktuellen Felds sein sollte. Fügen Sie gleichzeitig nach jedem Eingabeelement eine Schaltfläche „Bestätigen“ hinzu, damit Benutzer Änderungen übermitteln können.

• <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>

Click-to-Edit implementieren
• Damit Benutzer auf die Schaltfläche „Bearbeiten“ klicken können, müssen wir einen „Ändern“-Link hinzufügen und beim Klicken das Bearbeitungsformular öffnen. Zur Umsetzung dieser Funktionalität wird hier JavaScript verwendet.
• Zuerst müssen wir einen Klickereignis-Listener für den Link „Ändern“ hinzufügen und die showEditor-Funktion aufrufen, wenn der Benutzer klickt:

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

Als nächstes müssen wir die showEditor-Funktion definieren und darin ein Formularelement für die Benutzerbearbeitung erstellen Daten:

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);
}

Hier muss beachtet werden, dass wir, nachdem wir das Formularelement erstellt haben, es auch zur Seite hinzufügen müssen (hier zum Body-Element), um sicherzustellen, dass Benutzer den Inhalt sehen und bearbeiten können.

Verarbeitung geänderter Daten

Nachdem der Benutzer auf die Schaltfläche „Bestätigen“ geklickt hat, werden die Formulardaten für Datenaktualisierungsvorgänge an die update.php-Datei des Servers übermittelt. Hier müssen wir zuerst die Formulardaten abrufen und PDO verwenden, um eine Aktualisierungsanweisung auszuführen:

// 连接数据库
$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]);

Nach Abschluss der Datenaktualisierung können wir den Benutzer bei Bedarf auf andere Seiten umleiten oder eine Meldung „Änderung erfolgreich“ auf der aktuellen Seite anzeigen .

echo '修改成功！';

Vollständiger Code

Der Beispielcode lautet wie folgt:

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 '修改成功！';
?>

In diesem Artikel haben wir gelernt, wie man Daten direkt im Browser ändert, indem man auf die Schaltfläche „Bearbeiten“ klickt. Es ist zu beachten, dass wir zur Gewährleistung der Datensicherheit dem Code einige notwendige Überprüfungslogik hinzufügen müssen, um unnötige Sicherheitsrisiken zu vermeiden. Abschließend hoffe ich, dass dieser Artikel für PHP-Webentwickler hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Click-to-Modify-Bearbeitungsfunktion in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!