Question

在我的代码中，我在我的.JS文件中创建了一系列项目。然后我能够将此数组传递给.Jade，并将数组中的每个值用作下拉列表中的项目。我现在想要将他们将在下拉列表中单击的项目的用户输入传递回服务器端（.js），以便我可以使用用户输入来查找更多数据。

我的问题是我不知道如何将.jade变量发送到服务器端。我想发送＆＃34; this.selectedIndex＆＃34; / selected＆＃34; val＆＃34;所以我可以将它用作javascript文件中的变量。

.JS

router.get('/', function(req, res) {
  var projectPathArray = [];

  async function main() {                       
    var projects = await _db.listProjects();
        projects.forEach(async (item) => {
          var pathy = item.path;
          projectPathArray.push(pathy)
             })


res.render('index', { title: 'Projects', projectPathArray:projectPathArray}); 

}

main();

.jade

extends layout

script(src="libs/jquery-1.11.3.min.js")
link(rel='stylesheet', href='/stylesheets/style.css')

block content
  h1= title

  p To start, please select a project

  html
   body 
    form#test-form(action='', method='get')
    select#menu1(name='menu1', size=projectPathArray.length)
      each val in projectPathArray
        option=val

Answer 1

如果不准确理解你想要的东西，至少应该让你更接近你所要求的东西。

1）添加路径以处理post，您可以使用req.body检索在表单中发布的值。

2）在Pug/Jade模板中，我缩进了表单元素，使它们位于表单下，添加了一个提交按钮，并将表单的方法更改为post。

<强> .JS

router.post('/', function(req, res) {
   console.log(req.body);
   res.redirect('/');
});

router.get('/', function(req, res) {
  var projectPathArray = [];

  async function main() {                       
    var projects = await _db.listProjects();
        projects.forEach(async (item) => {
          var pathy = item.path;
          projectPathArray.push(pathy)
             })


res.render('index', { title: 'Projects', projectPathArray:projectPathArray}); 

});

main();

<强> .jade

extends layout

script(src="libs/jquery-1.11.3.min.js")
link(rel='stylesheet', href='/stylesheets/style.css')

block content
  h1= title

  p To start, please select a project

  html
   body 
    form#test-form(action='', method='post')
                                      ^  
      select#menu1(name='menu1', size=projectPathArray.length)
        each val in projectPathArray
          option=val
      button(type='submit') Submit

Answer 2

您需要使用某种机制从前端回到服务器。这包括但不限于websockets和/或AJAX。

如何将变量从Jade传递给.JS文件？

2 个答案: