从 Node.js 文件中获取数据并在 HTML/JS 页面中显示答案

【问题标题】：Getting Data from Node.js file and displaying it in HTML/JS page从 Node.js 文件中获取数据并在 HTML/JS 页面中显示
【发布时间】：2013-08-05 05:04:12
【问题描述】：

我是 Node.js 的新手，这是我第一个使用它的项目。我制作了一个名为 test.js 的 node.js 文件。它有一个数组，比如 a。

现在我想制作一个 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);

我可以在控制台上看到中国。但我没有将结果数组返回给客户端。这里的结果是一个数组，我在控制台上得到它的值。只是我没有把它还给客户。有什么帮助吗？

【问题讨论】：

您需要将 nodeJS 作为 http 服务器运行，并让它根据请求提供数据。然后您需要更新您的 HTML 文件，以便在单击按钮时对您的 nodejs 服务器进行 AJAX 调用。
@JohnP：感谢您的评论。你能把它写成详细的答案吗？我对 node.js 很陌生

标签： javascript html node.js

【解决方案1】：

您应该首先设置一个服务器来处理请求。我为此使用 expressjs - http://expressjs.com/

这将允许您将 nodejs 作为 Web 应用程序运行。

在 express 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)
   });
});

这应该能让你继续前进。

【讨论】：

谢谢。我现在正在尝试使用编辑后的代码。如果我没有得到任何帮助，那么我会尝试使用 express
如何在响应渲染html页面时获取html页面中的数据并在其他参数中传递数据。像这样res.render('page.html', { list });
@SPnL 我认为数据必须作为页面的一部分发送。您必须在 page.html 中将该数据编码为 JSON 并使用客户端 JS 读取它

【解决方案2】：

在与同样的问题搏斗之后，我发现这正是模板引擎进入节点图片的地方。 EJS 为我解决了这个问题，但还有更多可用的。这个article 比较了 10 个模板引擎。

【讨论】：