在 html 中显示来自 nodejs 的数据答案

【问题标题】：Display data coming from nodejs in html在 html 中显示来自 nodejs 的数据
【发布时间】：2016-03-21 03:18:33
【问题描述】：

如果这是一个重复的问题，我很抱歉。但是，我正在努力想办法在 html 中显示来自我的 nodejs 的数据。

以下是我的 data.js 代码：

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

var data = new Array;    
data.push([1,2,3]);
data.push([4,"Test data",6]);

app.use(function (req, res) {
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000');
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.send(data)
  //next();
});

app.listen(9000, function () {
  console.log('Example app listening on port localhost:9000!');
});

我想在 html 页面中显示这些数据。任何人都可以在这里帮助 HTML/JQuery 脚本吗？谢谢。

HTML 代码：

<script type="text/javascript"> 
 jQuery(document).ready(function($) {   
 alert('Hello');

$.ajax({
    url:"http://localhost:9000",
    dataType: 'json',
    data: data,
    success: success

});

$.get('/', {}, function(data){
// not sure it is the right code
console.log(data);
// then the code to create a list from the array (no pb with that)
});

//function jsonpCallback(data){
//    alert("jsonpCallback");
//}
    //do jQuery stuff when DOM is ready
});
</script>

    <h1>Header Text</h1>

【问题讨论】：

标签： javascript jquery html node.js

【解决方案1】：

首先，您必须设置 api 路由和文件服务路由。然后你可以调用 api 方法（例如通过 jQuery ajax）并获取响应数据。

【讨论】：

【解决方案2】：

试试这个而不是你的 node.js 代码：

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

var data = new Array;    
data.push([1,2,3]);
data.push([4,"Test data",6]);

app.get('/', function (req, res) {
     // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.send(data);
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

我现在没有 nodejs 来测试这个，但这应该会给你一个想法。您必须定义路线。我为您定义了 .get("/") ，因此对主 url 的每个请求都会调用此函数。我还将 Access-Control-Origin 设置为 *.如果您想稍微保护一下，请从 nodejs 提供静态文件。

【讨论】：