从 html 页面使用 node.js 中的 Express 获取下拉值

Question

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.

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?

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.

Cheers!

Answer 1

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.

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.

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.

Answer 2

You can use a change function inside the select tag.

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

Answer 3

You can use req.query.selectpicker for getting data from the 'select' element as a URL query Parameter. This worked for me!

Keep the method GET and action as the route name in which you want to access the dropdown data.