我是前端开发的新手，并试图自己教一点。
我在理解如何使用文件中的数据填充下拉框时遇到了一些困难。
我正在使用节点和JavaScript。我现在没有使用任何其他软件包，也不想使用其他任何软件包。我已经阅读了很多关于此的文章，并看到很多关于Express，jquery，php等的东西......但是我还没准备好去那里。我想立即将它保存在node和javascript中。
我有一个简单的页面，其中包含一个带有时间值列表的选择框。然后用户将选择其中一个“时间”，我将从中进行一些其他处理。我可以按如下方式填充选择框：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Book Viewer</title>
<link href="https://fonts.googleapis.com/css?family=Caveat|Open+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="loadQuoteTimes.js" defer></script>
</head>
<body>
<header>
</header>
<form action="/submit-time" method="post">
<div id="timeInfo">
<fieldset>
<select class="timeList" name="searchTime"></select>
<button>Submit</button>
</fieldset>
</div>
</form>
</body>
<footer>
</footer>
</html>
app.js
var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req, resp) {
console.log("request method: " + req.method);
if (req.method === 'POST') {
req.on('data', function (data) {
console.log("POST invoked: " + data);
data = data.toString();
data = data.split('=');
if (data[0] === 'searchTime') {
console.log("Time to search for: " + data[1]);
}
}
);
}
/* I realize I need to check to see if I am doing a GET before I get into this switch... */
switch (req.url) {
case "/submit-form":
break;
case "/index.html", "/":
console.log("HTML");
fs.readFile("index.html", function (error, pgResp) {
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking are Not Found');
} else {
resp.writeHead(200, { 'Content-Type': 'text/html' });
resp.write(pgResp);
}
resp.end();
});
break;
case "/css/styles.css":
console.log("CSS");
fs.readFile("css/styles.css", function (error, pgResp) {
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking are Not Found');
} else {
resp.writeHead(200, { 'Content-Type': 'text/css' });
resp.write(pgResp);
}
resp.end();
});
break;
case "/loadQuoteTimes.js":
console.log("loadQuoteTimes");
fs.readFile("loadQuoteTimes.js", function (error, pgResp) {
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking are Not Found');
} else {
resp.writeHead(200, { 'Content-Type': 'text/js' });
resp.write(pgResp);
}
resp.end();
});
console.log("load quote times finished");
break;
case "/submit-time":
break;
case "/index.html?productKey=ff":
console.log("product key request");
break;
default:
resp.writeHead(404);
resp.write("Contents not found: " + req.url);
console.log("contents not found: " + req.url);
break;
}
}).listen(80);
console.log('Server Started listening on 80');
loadQuoteTimes.js
var ul = document.querySelector("select.timeList");
for (var i = 0; i < 50; i++) {
var listItem = document.createElement("option");
listItem.value = i;
listItem.textContent = "09:01:00.001";
ul.appendChild(listItem);
}
我可以显示列表，并在使用上述代码进行选择时获取所选项目。但是，这仅适用于静态列表。我无法弄清楚如何用硬编码数据之外的东西填充列表。我的直觉告诉我，我需要在加载/.index.html时做一些事情，但我还没有找到那个魔法。
有人能指出我的方向或告诉我，我是否完全吠叫错误的树。
提前致谢
我想出了一个非常难看的方法来做到这一点。基本上，您制作每行javascript以发送回浏览器。我使用以下代码替换了switch语句中的loadQuoteTimes.js案例：
case "/loadQuoteTimes.js":
// reference the html select item
var hd = "var ul = document.querySelector\(\"select.timeList\"\)\;";
resp.write(hd);
var li;
// currently just hard coding values to get the code to work. Replace below loop with
// a collection of something read from file or database
for (var i = 0; i < 5; i++) {
li = "var listItem = document.createElement\(\"option\"\)\;" + "\n";
resp.write(li);
li = "listItem.value = " + i + "\;" + "\n";
resp.write(li);
li = "listItem.textContent = \"09:00:00.001\"\;" + "\n";
resp.write(li);
li = "ul.appendChild\(listItem\)\;" + "\n";
resp.write(li);
}
resp.end();
break;