如何在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之間傳遞參數？

回答

相關問題