Cara menggunakan JavaScript untuk menyimpan data yang diubah suai ke pangkalan data MySQL

Dalam aplikasi web, pangkalan data MySQL digunakan secara meluas. Walau bagaimanapun, bagi pembangun yang baru mula menggunakan MySQL, mereka mungkin menghadapi beberapa kesukaran, seperti cara menyimpan data yang diubah suai. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menyimpan data yang diubah suai ke pangkalan data MySQL.

Langkah pertama ialah menyambung ke pangkalan data MySQL. Dalam kes ini, kami akan menggunakan Node.js untuk menyambung ke MySQL. Untuk menyambung ke MySQL, kita perlu menggunakan pakej npm mysql. Pakej ini ialah pemacu Node.js untuk mysql, yang boleh digunakan dalam persekitaran Node.js. Kita boleh memasang mysql dengan arahan berikut.

npm install mysql

Sambung ke pangkalan data MySQL

Langkah seterusnya ialah menyambung ke pangkalan data MySQL menggunakan pemacu dalam Node.js. Kami akan mencipta fail yang dipanggil db.js dengan kandungan berikut di dalamnya.

const mysql = require('mysql');

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

module.exports = con;

Kami akan membuat sambungan MySQL menggunakan kaedah createConnection. Kaedah ini menerima objek dengan sifat berikut:

• hos - nama hos pelayan MySQL
• pengguna - nama pengguna pengguna MySQL
• kata laluan - MySQL kata laluan pengguna
• pangkalan data - nama pangkalan data MySQL

Kami akan mengeksport sambungan ini supaya kami boleh menggunakannya daripada fail lain.

Simpan data yang diubah suai

Sekarang kita disambungkan ke pangkalan data MySQL, kita boleh mula menyimpan data yang diubah suai. Katakan kita mempunyai jadual yang dipanggil "pengguna" dengan tiga lajur: id, nama dan e-mel. Kami akan menyimpan data dengan mendapatkan tiga nilai ini daripada borang HTML menggunakan JavaScript.

Pertama, kami akan mencipta borang HTML yang membolehkan pengguna memasukkan nama dan e-mel mereka. Borang kelihatan seperti ini:

        Save

Dalam borang, kami telah menentukan elemen input untuk mendapatkan nama dan alamat e-mel pengguna. Kami juga menambahkan elemen butang pada borang dan memberikannya pengendali acara onclick yang akan memanggil fungsi simpan.

Sekarang, mari tulis kod JavaScript untuk menyimpan data. Tambahkan skrip berikut dalam index.html.

<script></script>
<script>
function save() {
  const name = document.getElementById(&#39;name&#39;).value;
  const email = document.getElementById(&#39;email&#39;).value;

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

Dalam skrip ini kita mula-mula mendapat nama dan alamat e-mel yang dimasukkan oleh pengguna. Seterusnya, kami menggunakan nilai ini untuk mencipta pernyataan INSERT yang memasukkan data yang dimasukkan pengguna ke dalam jadual pengguna pangkalan data MySQL.

Kami menggunakan kaedah pertanyaan MySQL untuk melaksanakan pertanyaan SQL. Kaedah ini menerima dua parameter: pertanyaan SQL dan fungsi panggil balik. Fungsi panggil balik dipanggil selepas pertanyaan dilaksanakan. Dalam fungsi panggil balik kita boleh menyemak sama ada terdapat sebarang ralat dan mengeluarkan bilangan rekod yang dimasukkan.

Kini apabila pengguna memasukkan nama dan e-mel mereka dan mengklik butang simpan, kami akan menggunakan JavaScript untuk menyimpan data ke dalam pangkalan data MySQL.

Kesimpulan

Menyimpan perubahan pada pangkalan data MySQL menggunakan JavaScript tidak sukar. Dalam artikel ini, kami menerangkan cara menyambung ke pangkalan data MySQL dan menggunakan JavaScript untuk mendapatkan data daripada borang HTML dan kemudian menyimpan data ke pangkalan data MySQL. Jika anda menghadapi sebarang masalah, sila baca dokumentasi rasmi pakej mysql npm untuk mendapatkan bantuan lanjut.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk menyimpan data yang diubah suai ke pangkalan data MySQL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!