如何在node.js和HTML之间传递参数？

我是node.js和mongodb的新用户，仍在学习。请原谅，如果这个问题看起来很简单。我的node.js MongoDB的查询脚本（hello.js）是─如何在node.js和HTML之间传递参数？

var MongoClient = require('mongodb').MongoClient; 
    var assert = require('assert'); 
    var url = 'mongodb://localhost:27017/flood'; 
    MongoClient.connect(url, function(err, db) { 
     assert.equal(null, err); 
     console.log("Connected correctly to server."); 
     var collec_name="99" 
     var field_name ="data1" 
     var value=311 

     db.collection(collec_name).find({data0:value}, {[field_name]:1, _id:0}).toArray(function(err, result) { 
     if (err) throw err; 
     console.log(result); 
     db.close(); 
     }); 
    });

查询运行正常用命令 - node hello.js并得到了预期值result（例如，中result产值0.000115）。请注意，var collec_name="99",var field_name ="data1"和var value=311包含固定值。

我的HTML文件（index.html）是─

<!DOCTYPE html> 
<html> 
<body> 
<p id="demo"></p> 
<script> 
var c_n = "99"; 
var f = "data1"; 
var v = 311; 

document.getElementById("demo").innerHTML = 0.000115; 
</script> 

</body> 
</html>

现在，我想的变量c_n，从index.htmlv和f值传递给hello.js通过替换hello.js三个语句原样

var collec_name=c_n 
var field_name = f 
var value = v

然后，我想将result的值从hello.js传递给index.html通过替换index.html一个声明原样

document.getElementById("demo").innerHTML = result;

所以，我怎样才能实现这些参数传递，这样，如果我运行index.html页面，我可以显示result在网络上的价值？任何基于我的脚本的解决方案脚本将受到高度赞赏。

来源

2017-08-08 Kayes

通常在Stack Overflow上，如果你找到自己问题的答案，通常的做法是将自己的答案添加到问题中，并将其标记为正确答案。你不应该编辑这个问题本身作为答案，因为这将会让未来的用户感到困惑（谁会自然而然地认为这个问题是一个问题！）你可能想要回滚你最近的几个问题编辑并单独发布相反。 –

谢谢你让我知道。 – Kayes

当然！（顺便说一句，这是一个典型的答案;谢谢你包含了很多细节，欢迎来到Stack Overflow！） –

要在您的后端和您的客户端之间发送数据，您必须使用AJAX,socket.io或WebSockets。如果你只需要更新后端，如果客户想要你应该使用AJAX。如果您的客户端必须由后端（服务器）通知，那么您应该使用socket.io或WebSockets。因为您使用NodeJs，我建议您使用socket.io。

只要看看它： https://socket.io/

下面一个例子的代码：

首先安装软件包：

npm install -S socket.io 

var MongoClient = require('mongodb').MongoClient; 
var assert = require('assert'); 

// add socket io 
var app = require('http').createServer(handler) 
var io = require('socket.io')(app); 

// connect to port 
app.listen(3030); 

var url = 'mongodb://localhost:27017/flood'; 

// setup server 
io.on('connection', function (socket) { 

    // add event 
    socket.on('data', function (data) { 

     // execute after event was emitted 
     MongoClient.connect(url, function (err, db) { 
      assert.equal(null, err); 
      console.log("Connected correctly to server."); 
      var collec_name = data.collec; 
      var field_name = data.field; 
      var value = data.value 

      db.collection(collec_name).find({ data0: value }, { [field_name]: 1, _id: 0 }).toArray(function (err, result) { 
       if (err) throw err; 
       // TODO add emmit 
       console.log(result); 
       db.close(); 
      }); 
     }); 
    }); 
});

HTML：

<!DOCTYPE html> 
<html> 
<body> 
    <p id="demo"></p> 
    <script src="path/to/socket.io"></script> 
    <script> 
     var socket = io('http://localhost'); 

     // send message 
     socket.emit('data', { 
      collec: "99", 
      field: "datal", 
      value: 311 
     }); 

     // TODO add listener 
     document.getElementById("demo").innerHTML = 0.000115; 
    </script> 

</body> 
</html>

来源

2017-08-08 06:02:17 archos

谢谢。我对此并不熟悉。如果你想修改我的上述脚本或根据我的上述脚本提供解决方案脚本，这对我有帮助。 – Kayes

我编辑了答案 – archos

这不起作用。起初，我运行了HTML脚本，然后用节点hello.js执行了服务器端的node.js脚本，但什么也没有得到。此外，如果我不删除服务器脚本中的处理程序，则显示处理程序错误。你能否给我完整的客户端和服务器端脚本？另外，我不确定我需要包含在脚本的TODO部分中。我只想运行HTML页面，以便它可以自动将参数发送到服务器端脚本，然后自动显示结果。你的脚本有可能吗？请帮忙。 – Kayes

-1

你可以使用AJAX，WebSockets或socket.io自己实现一个API - 或者你可以继续看看Express框架。

使用Express设置Node.js服务器不仅可以让您访问丰富的API接口，还可以让您的任务变得更加轻松。

使用它，你可以建立这样一个简单的途径：

app.post('/compute', function(req, res){ 
    // compute 'result' 
    res.send(result); 
});

来源

2017-08-08 06:22:42 ryder

我是新来的，我以前从未使用过快递。你能帮我更新我的上述脚本吗？谢谢。 – Kayes

最后，我是能够解决的问题。由于我在网上找不到任何完美的解决方案，如果我在此发布类似问题的一般解决方案，我认为它对其他用户（他们面临类似问题）将有所帮助。请原谅，如果这不是发布解决方案的合适地点。

我的解决方案：这不是我上面的例子中的具体解决方案，但我认为这是更好地提供了一个类似的问题，一般的解决方案，使任何人都可以随时修改根据他/她的榜样这个解决方案/更新/需要作为基本的方法将永远是相同的。首先，你需要有HTTP，快递和身体解析器，您可以通过下面的命令执行：

npm install http 
npm install express 
npm install body-parser --save

的一个普遍问题：假设，我有两个数字（例如a = 20和b = 24在客户端HTML页面，我想总结一下服务器端的数字，并将求和结果（sum = 44）返回到客户端显示在HTML页面中，然后使用下面的nodejs和ejs脚本 -

index .ejs：

<html> 
    <head> 
     <title>Example solution</title> 
     <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>  
     <script type="text/javascript"> 
      $(function(){    
       $('#loadRequest').click(function(e) { 
        e.preventDefault(); 
        console.log('Load_button clicked'); 
        var data = {}; 
        data.a = 20; //input 
        data.b = 24; //input 

        $.ajax({ 
         type: 'POST', 
         data: JSON.stringify(data), //input data to be sent to the server 
         contentType: 'application/json', 
         url: 'http://localhost:80/endpoint',       
         success: function(res) { 
          console.log('success'); 
          console.log(res); 
          $("#demo").html(res); //summation displayed in the HTML page 
         } 
        }); 

       });    
      }); 

     </script> 
    </head> 
    <body> 
     <p id ="demo"></p> 
     <button id="loadRequest">Load</button> 
    </body> 
</html>

server.js：

var http = require('http'); 
var express = require('express'); 
var app = express(); 

app.set('view engine', 'ejs'); //tell Express we're using EJS 
app.set('views', __dirname + '/views'); //set path to *.ejs files 
app.use('/public', express.static(__dirname + '/public')); 

var bodyParser = require('body-parser'); 
app.use(bodyParser.json()); // support json encoded bodies 
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies 

app.get('/', function(req, res) { 
    //render index.ejs file 
    res.render('index'); 
}); 

app.post('/endpoint', function(req, res){ 
    var x = req.body.a; //received input 1 from client side 
    var y = req.body.b; //received input 2 from client side 
    console.log(x); 
    console.log(y); 
    var sum =x+y; 
    console.log(sum); 
    res.send(String(sum)); //sending summation to the client 
}); 

http.createServer(app).listen(80);

它完美地工作。如果您有任何意见/反馈，请告诉我。

来源

2018-02-24 08:56:48 Kayes

如何在node.js和HTML之间传递参数？

回答

相关问题