HTML 客户端和 Node.js 服务器之间的变量答案

【问题标题】：Variables between HTML Client and Node.js ServerHTML 客户端和 Node.js 服务器之间的变量
【发布时间】：2016-04-05 21:50:11
【问题描述】：

我只想将变量从 HTML 页面传递到节点 js，并对数据执行一些计算，然后使用 ejs 将其返回到 HTML 安装 ejs 后：

npm install ejs

我正在尝试传递这个值为 50 "HTML Page" 的变量 temp：

<html>
   <head>
   </head>
<body>
My temperature: <%= temp=50 %>
Temp + 10 : <%= total %>
</body>
</html>

还有我的nodejs server.js：

var http = require('http');
var ejs = require('ejs');
var fs = require('fs');

http.createServer(function(req,res) {
  res.writeHead(200, {'Content-Type': 'text/html'});

  //since we are in a request handler function
  //we're using readFile instead of readFileSync
  fs.readFile('index.html', 'utf-8', function(err, content) {
    if (err) {
      res.end('error occurred');
      return;
    }
    var temp;  //here you assign temp variable with needed value
    var total = temp+10;
    var renderedHtml = ejs.render(content, {temp: temp, total:total});  //get redered HTML code
    res.end(renderedHtml);
  });
}).listen(8080);

任何帮助将不胜感激提前致谢。

【问题讨论】：

标签： javascript node.js ejs

【解决方案1】：

您不需要这个fs 要求。

你需要做的就是：

var express = require('express');
var app = express();
var path = require('path'); //Use the path to tell where find the .ejs files
// view engine setup
app.set('views', path.join(__dirname, 'views')); // here the .ejs files is in views folders
app.set('view engine', 'ejs'); //tell the template engine


var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) { // route for '/'
  var temp = 50;  //here you assign temp variable with needed value
  var total = temp+10;
  res.render('index', { //render the index.ejs
    temp: temp,
    total:total
  });
});

var server = app.listen(3000, function() {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

HTML（重命名为 index.ejs）：

<html>
   <head>
   </head>
<body>
My temperature: <%= temp %>
Temp + 10 : <%= total %>
</body>
</html>

【讨论】：

我想从 HTML 页面传递临时值
btw @Hathout 这不是最佳实践，如果您想使用 html 中的值，我建议您在 html 内容中创建一个 javascript/text，然后通过 javascript（不是服务器端) 更新/使用值
好的@Alvardo，这是我更新的代码<!DOCTYPE html> <html> <body> <form> Set temperature:<br> <select id="temp"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> C <br> <input type="button" onclick="myFunction()" value="Set Temp"> </form> <script> function myFunction() { var h = document.getElementById("temp"); var option_1 = h.options[h.selectedIndex].text; temp= Number(option_1); } </script> </body> </html> 可以将临时变量传递给server.js文件吗？

【解决方案2】：

在您的服务器文件中， temp 的值未定义。所以总计 = 未定义 + 10 = 未定义。因此，您的两个变量都未在服务器文件中定义。尝试这样做（在服务器文件中）： var temp = 0 var total = 0

在html文件中My temperature: <%= temp = 50 %> Temp + 10 : <%= total = temp + 10 %> 现在它应该显示正确的值，即 50 和 60。希望这会有所帮助

【讨论】：

这样我不能在我的“server.js”中使用值为“50”的temp，我需要使用它的值，我将通过HTML页面传递。
所以你将在 html 页面上传递一个值并想在服务器文件上使用它.. 对吗？但是在您编写的代码中，您没有在 html 页面上传递任何动态值。你所做的已经硬编码了 temp 的值。您应该在页面中添加一个输入字段，然后动态存储该值以供您的服务器文件使用。您可以为此使用角度。