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

我是Node.js的新手，這是我的第一個項目。我製作了一個名爲test.js的node.js文件。它有一個數組說a。從Node.js文件獲取數據並將其顯示在HTML/JS頁面

現在我想製作一個HTML文件，它在按鈕單擊事件中調用此test.js。然後從該文件獲取數據並將其發佈到HTML文件的表格中。

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

同時，我搜索並編寫了一些代碼。請求到達服務器，但我總是從服務器獲得錯誤響應。爲什麼這樣？

客戶端 -

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);

我可以看到中國在console.But我不回去，結果數組返回給客戶端。這裏的結果是一個數組，我在控制檯上獲得它的值。只是我沒有回到客戶端。任何幫助？

來源

2013-08-04 Wayne Rooney

您需要將nodeJS作爲http服務器運行，並根據請求提供數據。然後，您需要更新您的HTML文件，以便在點擊按鈕時對您的nodejs服務器進行AJAX調用。 – JohnP

@JohnP：感謝您的評論。你能否詳細寫下它作爲答案。我對node.js –

您應該首先設置服務器來爲請求提供服務。我爲此使用了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調用中將以前的網址添加到您的數據中，並使用它進行操作。

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

這應該讓你去。

來源

2013-08-04 13:33:18 JohnP

非常感興趣。我正在嘗試編輯的代碼。如果我沒有得到任何幫助，那麼我會嘗試使用快遞 –

如何在html頁面中呈現html頁面時響應並傳遞其他參數中的數據。像這樣'res.render（'page.html'，{list}）;' – SPnL

@SPnL數據必須作爲頁面的一部分發送，我認爲。您必須將這些數據編碼爲page.html中的JSON並使用客戶端JS讀取它 – JohnP

經過與同樣的問題摔跤後，我發現這正是模板引擎進入節點圖片的地方。 EJS爲我解決了這個問題，但還有更多可用的功能。這個article比較了10個模板引擎。

來源

2018-02-12 08:08:17

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

回答

相關問題