Menu
I am trying to extract data from MySQL and display it on my HTML page, but when I run the code below on my browser http://localhost:3000, the data does not display on my page. I would appreciate if somebody could help me solve this problem.
index.html
<!DOCTYPE>
<html>
<head>
<title>Data from MySQL</title>
</head>
<body>
<div id="output_message"></div>
</body>
</html>
app.js
var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', express.static(__dirname + '/'));
app.set('view engine', 'html');
var connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "mywebsite"
});
connection.connect();
app.get('/',(req, res) => {
connection.query("SELECT * FROM chat",(err, result) => {
if(err) {
console.log(err);
res.json({"error":true});
}
else {
console.log(result);
res.json(result);
}
});
});
app.listen(3000, function () {
console.log('Connected to port 3000');
});
There are multiple factors you need to consider :
1 - When you want to use a POST method sent through a HTML file you must have a
<form action="Name of your processing file" method="POST">YOUR FORM HERE</form>
However; if you simply trying to call a db and get your data then just perform
your logic within the GET method as following:
app.get('/',(req, res) => {
connection.connect(function(err) {
if(err) throw err;
else {
connection.query("SELECT * FROM chat",(err, result) => {
if(err) {
console.log(err);
res.json({"error":true});
}
else {
console.log(result);
res.json(result);
}
});
}
});
});
*** You may ask what about the index.html . There are two responses for that :
1 - Use res.sendFile(__dirname + "/YOURPAGE-Name.html"); when you want to send a file
as a result
Example:
app.get("/",(req, res) => {
res.sendFile(__dirname + "/Welcome.html");
});
Welcome.html
<!DOCTYPE>
<html>
<head>
<title>Data from MySQL</title>
</head>
<body>
<p>Welcome to my page</p>
</body>
</html>
2 - Use res.sendFile(__dirname + "/index.html"); when you want to get the
initial page so then you can have forms within the application that you want to process
Example:
app.get("/",(req, res) => {
res.sendFile(__dirname + "/index.html");
});
index.html
<!DOCTYPE>
<html>
<head>
<title>Data from MySQL</title>
</head>
<body>
<form action="/" method="post">
//YOUR FORM HERE
</form>
</body>
</html>
159
answered Aug 07 '26 12:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With