jquery - 如何获取下拉列表以从数据库nodejs输出数组

问题描述

我正在尝试让我的 Web 应用程序从我的数据库中显示一个下拉列表，但它没有将数据分隔在单独的选项标签中，我尝试遵循包括 forEach 方法但没有运气的各种方法，这就是我的代码看起来正确的样子现在它当前显示数据库但不是我想要的下拉列表格式。

app.js

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

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var registerRouter = require('./routes/register');
var loginRouter = require('./routes/login');

var app = express();

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

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')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/register', registerRouter);
app.use('/login', loginRouter);

// get PLAYERS for dropdown in 'create a team'
app.get('/getData_players', function(req, res) {

  // connect to the db
  var mysql = require('mysql')
  var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    port: 3306,
    database: 'mgp'

  });

  connection.connect();
  connection.query('SELECT * from players', function(err, rows, fields) {
    // ensuring to throw something wheter there's an error or not
    if (err) throw err;

    var output = '';
    for (var i = 0; i < rows.length; i++) {

      var player = rows[i].player + ' ';

      output = output + player;

    }

    console.log("Connected to player table!");
    res.send(output);
  });
  connection.end();
});


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
index.ejs

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

  <link rel="stylesheet" href="stylesheets/themes/RED.min.css" />
  <link rel="stylesheet" href="stylesheets/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <!----------------------------------------------------------------------------------------------------------------------------->

    <div data-role="header">
      <h1>Team</h1>

    </div>
    <!-- /header -->

    <div role="main" class="ui-content">
      <h2>Create a team</h2>

      GK
      <select onclick="getData_players()" id="goal_keeper" />
      <option class="player_data"></option>
      </select>

      RB
      <select id="right_back" /></select>
      CB
      <select id="center_back_1" /></select>
      CB
      <select id="center_back_2" /></select>
      LB
      <select id="left_back" /></select>
      RM
      <select id="right_mid" /></select>
      CM
      <select id="center_mid_1" /></select>
      CM
      <select id="center_mid_2" /></select>
      LM
      <select id="left_mid" /></select>
      ST
      <select id="striker1" /></select>
      ST
      <select id="striker2" /></select>
      <button id="submitTeam" class="ui-btn">Submit Team</button>

      <p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Logout</a></p>
    </div>
    <!-- /content -->

    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
    <!-- /footer -->
  </div>

  <!-- SHOW PLAYERS DROPDOWN -->
  <script>
    function getData_players() {

      $.get("/getData_players", function(data) {
        // embed the data into the player select tag
        var x = $(".player_data").html(data);
        //$('<option>').val(1).text('blah');
      });

    }
  </script>

</body>

</html>

标签： jquerysqlnode.jsajax

jquery - 如何获取下拉列表以从数据库nodejs输出数组

问题描述

解决方案

推荐阅读