JavaScript を使用して変更されたデータを MySQL データベースに保存する方法

Web アプリケーションでは、MySQL データベースが広く使用されています。ただし、MySQL を使い始めたばかりの開発者にとっては、変更したデータを保存する方法など、いくつかの困難に遭遇する可能性があります。この記事では、JavaScript を使用して変更されたデータを MySQL データベースに保存する方法を紹介します。

最初のステップは、MySQL データベースに接続することです。この場合、Node.js を使用して MySQL に接続します。 MySQL に接続するには、npm パッケージ mysql を使用する必要があります。このパッケージは、Node.js 環境で使用できる mysql 用の Node.js ドライバーです。次のコマンドで mysql をインストールできます。

npm install mysql

MySQL データベースに接続

次のステップは、Node.js のドライバーを使用して MySQL データベースに接続することです。次の内容を含む db.js というファイルを作成します。

const mysql = require('mysql');

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

module.exports = con;

createConnection メソッドを使用して MySQL 接続を作成します。このメソッドは、次のプロパティを持つオブジェクトを受け入れます:

• host - MySQL サーバーのホスト名
• user - MySQL ユーザーのユーザー名
• password - MySQL ユーザーのパスワード
• database - MySQL データベース名

この接続をエクスポートして、他のファイルから使用できるようにします。

変更されたデータの保存

MySQL データベースに接続したので、変更されたデータの保存を開始できます。 ID、名前、電子メールの 3 つの列を持つ「users」というテーブルがあると仮定します。 JavaScriptを使用してHTMLフォームからこれら3つの値を取得してデータを保存していきます。

まず、ユーザーが名前とメールアドレスを入力できる HTML フォームを作成します。フォームは次のようになります。

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

フォームでは、ユーザーの名前と電子メール アドレスを取得するための入力要素を定義しました。また、ボタン要素をフォームに追加し、保存関数を呼び出す onclick イベント ハンドラーを与えました。

次に、データを保存するための JavaScript コードを作成しましょう。以下のスクリプトをindex.htmlに追加します。

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

このスクリプトでは、まずユーザーが入力した名前と電子メール アドレスを取得します。次に、これらの値を使用して、ユーザーが入力したデータを MySQL データベースの users テーブルに挿入する INSERT ステートメントを作成します。

SQL クエリを実行するには、MySQL のクエリ メソッドを使用します。このメソッドは、SQL クエリとコールバック関数の 2 つのパラメータを受け取ります。コールバック関数はクエリの実行後に呼び出されます。コールバック関数では、エラーがあるかどうかを確認し、挿入されたレコードの数を出力できます。

ユーザーが名前と電子メールを入力して保存ボタンをクリックすると、JavaScript を使用してデータが MySQL データベースに保存されます。

結論

JavaScript を使用して MySQL データベースに変更を保存するのは難しくありません。この記事では、MySQL データベースに接続し、JavaScript を使用して HTML フォームからデータを取得し、そのデータを MySQL データベースに保存する方法を説明しました。問題が発生した場合は、mysql npm パッケージの公式ドキュメントを読んで詳細を確認してください。

以上がJavaScript を使用して変更されたデータを MySQL データベースに保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。