Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie JavaScript, um geänderte Daten in einer MySQL-Datenbank zu speichern

So verwenden Sie JavaScript, um geänderte Daten in einer MySQL-Datenbank zu speichern

PHPz
PHPzOriginal
2023-04-24 10:53:371103Durchsuche

In Webanwendungen wird häufig die MySQL-Datenbank verwendet. Entwickler, die gerade erst mit der Verwendung von MySQL beginnen, können jedoch auf einige Schwierigkeiten stoßen, beispielsweise beim Speichern geänderter Daten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript geänderte Daten in einer MySQL-Datenbank speichern.

Der erste Schritt besteht darin, eine Verbindung zur MySQL-Datenbank herzustellen. In diesem Fall verwenden wir Node.js, um eine Verbindung zu MySQL herzustellen. Um eine Verbindung zu MySQL herzustellen, müssen wir das npm-Paket mysql verwenden. Bei diesem Paket handelt es sich um einen Node.js-Treiber für MySQL, der in einer Node.js-Umgebung verwendet werden kann. Wir können MySQL mit dem folgenden Befehl installieren.

npm install mysql

Mit MySQL-Datenbank verbinden

Der nächste Schritt besteht darin, mithilfe des Treibers in Node.js eine Verbindung zur MySQL-Datenbank herzustellen. Wir erstellen eine Datei namens db.js mit dem folgenden Inhalt.

const mysql = require('mysql');

const con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'testdb'
});

module.exports = con;

Wir erstellen eine MySQL-Verbindung mit der Methode createConnection. Diese Methode akzeptiert ein Objekt mit den folgenden Eigenschaften:

  • host – Hostname des MySQL-Servers
  • user – Benutzername des MySQL-Benutzers
  • password – MySQL-Benutzerkennwort
  • database – Name der MySQL-Datenbank

Wir werden diese Verbindung exportieren, damit wir es können Verwenden Sie es aus anderen Dateien.

Geänderte Daten speichern

Da wir nun mit der MySQL-Datenbank verbunden sind, können wir mit dem Speichern geänderter Daten beginnen. Nehmen wir an, wir haben eine Tabelle namens „Benutzer“ mit drei Spalten: ID, Name und E-Mail. Wir speichern die Daten, indem wir diese drei Werte mithilfe von JavaScript aus dem HTML-Formular abrufen.

Zunächst erstellen wir ein HTML-Formular, in das der Benutzer seinen Namen und seine E-Mail-Adresse eingeben kann. Das Formular sieht so aus:

<form>
  <input type="text" id="name" name="name" placeholder="Name">
  <input type="email" id="email" name="email" placeholder="Email">
  <button type="button" onclick="save()">Save</button>
</form>

Im Formular haben wir Eingabeelemente definiert, um den Namen und die E-Mail-Adresse des Benutzers zu erhalten. Wir haben dem Formular außerdem ein Schaltflächenelement hinzugefügt und ihm einen Onclick-Ereignishandler gegeben, der die Speicherfunktion aufruft.

Jetzt schreiben wir JavaScript-Code, um die Daten zu speichern. Fügen Sie das folgende Skript in index.html hinzu.

<script src="db.js"></script>
<script>
function save() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  const sql = `INSERT INTO users (name, email) VALUES ('${name}', '${email}')`;
  
  db.query(sql, function (err, result) {
    if (err) throw err;
    console.log("1 record inserted");
  });
}
</script>

In diesem Skript erhalten wir zunächst den vom Benutzer eingegebenen Namen und die E-Mail-Adresse. Als nächstes verwenden wir diese Werte, um eine INSERT-Anweisung zu erstellen, die die vom Benutzer eingegebenen Daten in die Benutzertabelle der MySQL-Datenbank einfügt.

Wir verwenden die Abfragemethode von MySQL, um SQL-Abfragen auszuführen. Diese Methode empfängt zwei Parameter: die SQL-Abfrage und eine Callback-Funktion. Die Callback-Funktion wird aufgerufen, nachdem die Abfrage ausgeführt wurde. In der Callback-Funktion können wir prüfen, ob Fehler vorliegen und die Anzahl der eingefügten Datensätze ausgeben.

Wenn der Benutzer nun seinen Namen und seine E-Mail-Adresse eingibt und auf die Schaltfläche „Speichern“ klickt, verwenden wir JavaScript, um die Daten in der MySQL-Datenbank zu speichern.

Fazit

Das Speichern von Änderungen an einer MySQL-Datenbank mithilfe von JavaScript ist nicht schwierig. In diesem Artikel haben wir erklärt, wie man eine Verbindung zu einer MySQL-Datenbank herstellt und mithilfe von JavaScript Daten aus einem HTML-Formular abruft und die Daten dann in der MySQL-Datenbank speichert. Wenn Sie auf Probleme stoßen, lesen Sie bitte die offizielle Dokumentation des MySQL-NPM-Pakets, um weitere Hilfe zu erhalten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um geänderte Daten in einer MySQL-Datenbank zu speichern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn