Javascript 如何使用mysql数据库中的数据创建下拉列表？

因此，我有一个html表单，用户可以在其中选择一些选项。我想创建一个下拉列表，其中的数据将来自我的mysql数据库。 这些是我的文件：

忽略其他文件。Index.html是我的主页，我的表格是air-tickets.html
机票。html

<form id="form-submit" method="post">
    <div class="container" id="air-form-container">
        <div class="col-md-12">
            <label for="sel2" class="dropbar-label">Airline: </label>
            <select class="form-control airline-select" id="sel2" name="airline">
                <option value="none">Select airline</option>
            </select>
        </div>
    </div>
</form>

database.js

var express = require('express');
const path = require('path');
var air_tickets_router = express.Router();
const bodyParser = require('body-parser');

var db = require('../database');

air_tickets_router.use(bodyParser.json());

air_tickets_router.route('/')
    .get(function(req, res, next) {
        res.sendFile('air-tickets.html', { root: path.join(__dirname, '../public') });
    })
    .post(function(req, res, next) {
        console.log(req.body);
        console.log(req.body.sellist1);
        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/air-tickets');
    });

air_tickets_router.get('/get_airlines', function(req, res, next) {
    var sql = 'SELECT airline FROM flight ORDER BY airline';
    db.query(sql, function(err, data, fields) {
        if (err) throw err;
        res.render('airline-list', { title: 'Airline List', userData: data });
    });
});

module.exports = air_tickets_router;

const mysql = require('mysql');

var mysqlConnection = mysql.createConnection({
    host: "localhost",
    user: "myuser",
    password: "mypassword",
    database: "myproject",
    multipleStatements: true
});

mysqlConnection.connect(function(err) {
    if (err) throw err;
    console.log('Database is connected successfully !');
});

module.exports = mysqlConnection;

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

const mysqlConnection = require("./database")
const bodyParser = require('body-parser');

//Require routes
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var air_ticketsRouter = require('./routes/air_tickets');

var app = express();
app.use(bodyParser.json());

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//Use the routes
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/air-tickets', air_ticketsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;

和app.js

var express = require('express');
const path = require('path');
var air_tickets_router = express.Router();
const bodyParser = require('body-parser');

var db = require('../database');

air_tickets_router.use(bodyParser.json());

air_tickets_router.route('/')
    .get(function(req, res, next) {
        res.sendFile('air-tickets.html', { root: path.join(__dirname, '../public') });
    })
    .post(function(req, res, next) {
        console.log(req.body);
        console.log(req.body.sellist1);
        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/air-tickets');
    });

air_tickets_router.get('/get_airlines', function(req, res, next) {
    var sql = 'SELECT airline FROM flight ORDER BY airline';
    db.query(sql, function(err, data, fields) {
        if (err) throw err;
        res.render('airline-list', { title: 'Airline List', userData: data });
    });
});

module.exports = air_tickets_router;

const mysql = require('mysql');

var mysqlConnection = mysql.createConnection({
    host: "localhost",
    user: "myuser",
    password: "mypassword",
    database: "myproject",
    multipleStatements: true
});

mysqlConnection.connect(function(err) {
    if (err) throw err;
    console.log('Database is connected successfully !');
});

module.exports = mysqlConnection;

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

const mysqlConnection = require("./database")
const bodyParser = require('body-parser');

//Require routes
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var air_ticketsRouter = require('./routes/air_tickets');

var app = express();
app.use(bodyParser.json());

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//Use the routes
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/air-tickets', air_ticketsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;

我还有这个air\u tickets\u form.js在公共-->js文件中

const airlineSelect = document.querySelector("#sel2");

document.addEventListener("DOMContentLoaded", (event) => {
    fetch('http://localhost:3000/air-tickets/get_airlines')

    .then(req => req.json())
        .then(res => {
            for (let airline of res) {
                let airlineOption = document.createElement("option");
                console.log(airline);
                airlineOption.value = airline;
                airlineOption.innerHTML = airline;
                airlineSelect.appendChild(airlineOption);
            }
        })
        .catch(err => console.log(err));
});

---

通常，您可以在javascript中向select添加一个

，如下所示：

function addOption() {
  var select = document.getElementById("sel2"); //get your <select> by its ID
  var option = document.createElement("option"); // create a New <option>
  option.appendChild(document.createTextNode("Airline Name")); // provide <option> Text 
  option.setAttribute("id", "yourOptionID"); // giving your <option> an id
  select.appendChild(option); // add the created <option> to your <select>
}

函数addOption（）{
var select=document.getElementById（“sel2”）；//通过其ID获取
var option=document.createElement（“option”）；//创建一个新的
option.appendChild（document.createTextNode（“航空公司名称”）；//提供文本
option.setAttribute（“id”，“yourOptionID”）；//为您的
select.appendChild（选项）；//将创建的
}

---

现在，您只需循环查看数据库结果并添加所述的

选项

那么，您可以使用两种方法解决此问题：

1-第一种方法（不推荐） 您可以等待HTML页面加载，然后运行Javascript获取数据并将其转换为select标记下的选项

这正是你的air_tickets_form.js所做的，你所需要的就是在你的html中包含这个文件

只要在你身体的末端加上这条线

<script src="./js/air_tickets_form.js"></script>

玉变老了，现在换成了哈巴狗 您可以使用NPM安装它 然后用这个替换这一行

app.set('view engine', 'pug')

现在您正在使用视图引擎

然后需要将html转换为PUG语法

现在你可以使用在线转换器，比如这个

但我建议您阅读Pug文档以了解语法是如何工作的 （请注意，空间计数在pug中很重要）

当您想要发送HTML文件时，您可以使用以下代码发送pug文件

res.render('index.pug' , data) 

as数据是您的机票数据

然后在您的Pug文件中，在select标记处，您将希望创建一个自动插入HTML的循环

form#form-submit(method='post')
  #air-form-container.container
    .col-md-12
      label.dropbar-label(for='sel2') Airline: 
      select#sel2.form-control.airline-select(name='airline')
        option(value='none') Select airline
          each val,index in data
            option(value=index) #{val}

每个

函数将在数据中循环，然后为每个数据在其下方添加一行

优点：您的网站将加载所有可供使用的数据，无需等待

您可以使用的另一种方法是混合使用这两种方法—使用渲染引擎使数据就绪

当按下按钮时，它将使用js刷新数据

当然可以根据你的需要