從Node.js文件獲取數據並將其顯示在HTML / JS頁面中

Question

我是Node.js的新手，這是我的第一個項目。 我創建了一個名為test.js的node.js文件。 它有一個數組說a。

現在我想創建一個HTML文件，在按鈕單擊事件上調用此test.js。 然后從該文件中獲取數據並將其發布到HTML文件中的表中。

我已經編寫了node.js文件，我可以在console.log（a）上看到結果。 但我不明白如何將此數組發送到HTML時它會要求它。

與此同時，我用Google搜索並編寫了一些代碼。 請求到達服務器但我始終從服務器獲得錯誤響應。 為什么這樣？

客戶端 -

function fetch() {
    $.ajax({
    type: 'POST',
    url: "http://127.0.0.1:8888",
    data: 'China',
    datatype: 'json',
    success: function (data) {
        alert("hi");
        var ret = jQuery.parseJSON(data);
        $('#q').html(ret.msg);
    },
    error: function (xhr, status, error) {
        alert("hii");
    }
});

服務器端 ：

http.createServer(function(request, response) {  
    console.log("Request received");
    response.writeHeader(200, {"Content-Type": "application/json"}); 
    request.on('data', function (chunk) {
        console.log(chunk.toString('utf8'));
                    consol.log(result);
        response.write(JSON.stringify({data : result}));
    });     
    response.end();  
}).listen(8888);

我可以在控制台上看到中國。但是我沒有將結果數組返回給客戶端。 結果是一個數組，我在控制台上得到它的值。 只是我沒有把它拿回客戶端。 有幫助嗎？

Answer 1

您應該首先設置服務器來處理請求。 我使用expressjs - http://expressjs.com/

這將允許您將nodejs作為Web應用程序運行。

在快速JS中設置一條路線來為您的數據提供服務 - http://expressjs.com/api.html#express

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

app.get('/data', function(req, res){
  res.send('hello world'); //replace with your data here
});

app.listen(3000);

打開一個瀏覽器，輸入http://MY_SERVER_ADDR:3000/data ，你應該在那里看到你的輸出。

接下來，您需要將一個偶數處理程序附加到HTML文件，該文件將在觸發時觸發$ .get（）請求。 在$ .get調用中將以前的url添加到您的數據中並對其執行操作。

$('.my_selector').click(function(){
   $.get('http://MY_SERVER_ADDR:3000/data', {}, function(data){
        console.log(data)
   });
});

這應該讓你去。

Answer 2

在與同樣的問題搏斗之后，我發現這正是模板引擎進入節點圖片的地方。 EJS為我解決了它，但還有更多可用的。 本文比較了10個模板引擎。