How to use JavaScript to save modified data to a MySQL database

In web applications, MySQL database is widely used. However, for developers who are just starting to use MySQL, they may encounter some difficulties, such as how to save modified data. This article will introduce how to use JavaScript to save modified data to a MySQL database.

The first step is to connect to the MySQL database. In this case, we will use Node.js to connect to MySQL. To connect to MySQL, we need to use the npm package mysql. This package is a Node.js driver for mysql, which can be used in a Node.js environment. We can install mysql with the following command.

npm install mysql

Connect to MySQL database

The next step is to connect to the MySQL database using the driver in Node.js. We will create a file called db.js with the following content in it.

const mysql = require('mysql');

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

module.exports = con;

We will create a MySQL connection using the createConnection method. This method accepts an object with the following properties:

• host - MySQL server hostname
• user - MySQL user's username
• password - MySQL user's password
• database - MySQL database name

We will export this connection so that we can use it from other files.

Save modified data

Now that we have connected to the MySQL database, we can start saving modified data. Let's assume we have a table called "users" with three columns: id, name, and email. We will save the data by getting these three values ​​from the HTML form using JavaScript.

First, we will create an HTML form that will let the user enter their name and email. The form looks like this:

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

In the form, we have defined input elements to get the user's name and email address. We also added a button element to the form and gave it an onclick event handler which will call the save function.

Now, let’s write JavaScript code to save the data. Add the following script in 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>

In this script, we first get the name and email address entered by the user. Next, we use these values ​​to create an INSERT statement that inserts the user-entered data into the users table of the MySQL database.

We use MySQL's query method to execute SQL queries. This method receives two parameters: the SQL query and a callback function. The callback function is called after the query is executed. In the callback function we can check if there are any errors and output the number of records inserted.

Now when the user enters their name and email and clicks the save button, we will use JavaScript to save the data into the MySQL database.

Conclusion

It is not difficult to save changes to a MySQL database using JavaScript. In this article, we explained how to connect to a MySQL database and use JavaScript to get data from an HTML form and then save the data to the MySQL database. If you encounter any problems, please read the official documentation of the mysql npm package for more help.

The above is the detailed content of How to use JavaScript to save modified data to a MySQL database. For more information, please follow other related articles on the PHP Chinese website!