如何将数据从 node.js 传递到 html？答案

【问题标题】：How to pass data from node.js to html?如何将数据从 node.js 传递到 html？
【发布时间】：2018-01-13 02:37:53
【问题描述】：

这是我的nodejs

var http = require('http');   
var request = require("request");

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('Hello World!');
}).listen(8080);
console.log("welcome");

request("https://cognitive/myurl/w1/monitor/mystatus", function(error, response, body) {
 console.log(body);
 var mydata = body;
});

如何将此 mydata 传递给 html？ Mydata 将包含 JSON。我想从那个 JSON 打印表格。如果是 app.get 我可以通过 ajax 调用。我是nodejs的新手，如果有人知道请帮忙！

【问题讨论】：

此解决方案的最佳方法是使用 ajax！另一种方法是使用视图引擎。看到这个：mvc express

标签： html json node.js

【解决方案1】：

在您的 NodeJS 应用程序中使用模板引擎，例如 EJS。在 EJS 的帮助下，您可以将任何类型的数据发送到您的 HTML 文件（在本例中为 .ejs 文件）并根据您的要求进行渲染。

有关更多信息，请参阅此链接： https://www.npmjs.com/package/ejs

【讨论】：

【解决方案2】：

这就是我的做法。这应该可以将您的数据从节点服务器获取到 html 页面。

从网页向节点服务器发出 AJAX 请求。

function getData (query) {
  query = query || '';
  url = 'http://localhost:3000';

return new Promise(function(resolve, reject) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url + query);

  xhr.onload = function() {
    if(xhr.status === 200) resolve(xhr.responseText);

    else reject(Error(xhr.statusText + 'status : ' + xhr.status));
  }

    xhr.onerror = function() {
      reject(Error('Network Error'))
    }
   xhr.send();
  })
}


getData().then(function(response) {
  //do something with response
    });

在节点服务器上：

var server = http.createServer().listen(3000);
server.on('request' , function (request, response) {

switch (request.method){
    case 'GET':
        handleGET(request, response);
    break;

    case 'POST':
        handlePOST(request, response);
    break;

    default:
        res.writeHead(404);
        res.end();
    break;
}

function handleGET (req, res) {
  res.writeHead(200, {
    'Content-Type' : 'application/json'
    });
  res.write(JSON.stringify(result))
  res.end()
}

【讨论】：

【解决方案3】：

首先，您需要让您的服务器返回 JSON 而不是您当前拥有的硬编码字符串。这是一个帮助您入门的小例子：

const http = require('http');

const server = http.createServer((request, response) => {
  response.end (JSON.stringify ({ a: 'b' }))
}).listen(3000);

这会创建一个服务器，当您向其发送 GET '/' 请求时，该服务器会以哈希 { a: 'b' } 的 JSON 表示进行响应。

您现在可以做以下两件事之一：

查看模板引擎，例如 Pug 或 HBS。像 Express 这样的框架很容易使用这些开箱即用的配置。配置正确，可以根据数据动态生成视图。
为您的应用程序编写一个单独的前端，通过 AJAX 调用请求您的 JSON。最简单的方法是使用 jQuery.ajax，但也有成熟的前端框架可以促进这种事情。

一个简单的前端应用程序如下所示：

$.getJSON ('localhost:3000/', function (data) {
  $.each(data, function (key, value) {
    $('#myList').append( "<li id='" + key + "'>" + value + "</li>" );
  });
})

【讨论】：

【解决方案4】：

如何将此 mydata 传递给 html？ Mydata 将包含 JSON。我想要从该 JSON 打印表。如果是 app.get 我可以通过 ajax 调用。我是nodejs新手，如果有人知道请帮忙！

假设您使用JQuery。您需要将一个偶数处理程序附加到您的 HTML 文件，该处理程序将在触发时触发 $.get() 请求。将您的 url 添加到 $.get 调用中的数据并对其进行处理。

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

您可以从那里将数据插入到任何您想要的位置。

【讨论】：