从 html 页面使用 node.js 中的 Express 获取下拉值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18581459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get dropdown value using Express in node.js from html page
提问by tjhack
I am developing a quick node.js app using express and I am a newbie to NODE. For pages I am just using plain html.
我正在使用 express 开发一个快速的 node.js 应用程序，我是 NODE 的新手。对于页面，我只是使用纯 html。
Basically I have a form as follows:
基本上我有一个表格如下：
<form id="tableForm" action="getJson">
<select class="selectpicker" data-style="btn-info" name="selectpicker">
<optgroup label="Select Table">
<option name="" value="0">Select table</option>
<option name="table1" value="1">Table 1</option>
<option name="table2" value="2">Table 2</option>
<option name="table3" value="3">Table 3</option>
</optgroup>
</select>
</form>
Basically, I need to get the value selected once done I need it to be passed a app.get()call but my questions is how do I get the value and call the API?
基本上，我需要在完成后获得选择的值我需要通过app.get()调用但我的问题是如何获取值并调用 API？
var express = require('express'),
app = express();
app.use(express.bodyParser());
// as only one page can use res.sendfile to render the page which will
// contain the dropdowns ...
app.get('/', function(req, res){
res.sendfile('views/index.html');
});
app.get('/getJson', function (req, res) {
console.log(req.body.);
});
app.listen(process.env.PORT);
So I need to call the getJson()with the value being passed in.
所以我需要调用getJson()传入的值。
Cheers!
干杯!
回答by Andrew Lively
You need to submit the form somehow. The easiest way to do it would be with a submit button. You also need to put the method for the form, which by the way you phrased it it sounds like you're wanting to use GET.
您需要以某种方式提交表单。最简单的方法是使用提交按钮。您还需要为表单添加方法，按照您的表述方式，这听起来像是您想要使用 GET。
HTML
HTML
<form id="tableForm" action="/getJson" method="get">
<select class="selectpicker" data-style="btn-info" name="selectpicker">
<optgroup label="Select Table">
<option name="" value="0">Select table</option>
<option name="table1" value="1">Table 1</option>
<option name="table2" value="2">Table 2</option>
<option name="table3" value="3">Table 3</option>
</optgroup>
</select>
<input type="submit" />
</form>
On the server side you need parse out the get request. You already have it set up to receive it, you just need to know what you're looking for. Since your select has the name "selectpicker" that's what you'll use in this case.
在服务器端，您需要解析 get 请求。您已经设置好接收它，您只需要知道您在寻找什么。由于您的选择具有名称“selectpicker”，这就是您在这种情况下将使用的名称。
JavaScript
JavaScript
var express = require('express'),
app = express();
app.use(express.bodyParser());
// as only one page can use res.sendfile to render the page which will contain the drop downs
app.get('/', function (req, res) {
res.sendfile('views/index.html');
});
app.get('/getJson', function (req, res) {
// If it's not showing up, just use req.body to see what is actually being passed.
console.log(req.body.selectpicker);
});
app.listen(process.env.PORT);
I haven't fully tested this code, but it should work.
我还没有完全测试这段代码，但它应该可以工作。
回答by Rinsha CP
You can use a change function inside the select tag.
您可以在 select 标签内使用更改功能。
<select class="selectpicker" (ngModelChange)="changeValue($event)" data-style="btn-info" name="selectpicker">
<optgroup label="Select Table">
<option name="" value="0">Select table</option>
<option name="table1" value="1">Table 1</option>
<option name="table2" value="2">Table 2</option>
<option name="table3" value="3">Table 3</option>
</optgroup>
</select>
then in your typescript file,
然后在你的打字稿文件中，
changeValue(value) {
console.log(value);
}
回答by SHIVAM SHUKLA
You can use req.query.selectpickerfor getting data from the 'select' element as a URL query Parameter. This worked for me!
您可以req.query.selectpicker用于从“选择”元素中获取数据作为 URL 查询参数。这对我有用！
Keep the method GET and action as the route name in which you want to access the dropdown data.
保留方法 GET 和 action 作为您要访问下拉数据的路由名称。
