Javascript 从节点数据采集到浏览器的数据传输_Javascript_Json_Node.js_Transfer

Javascript 从节点数据采集到浏览器的数据传输

javascript json node.js

Javascript 从节点数据采集到浏览器的数据传输,javascript,json,node.js,transfer,Javascript,Json,Node.js,Transfer,我想将var xy数据从一个javascript文件A.js传输到另一个javascript文件B.js，并使用index.html将其可视化 A.js：从json使用node.js收集数据 B.js：基于从A.js收集的数据生成用于可视化的图表 index.html：在webbrowser中显示B.js中的图表已经起作用的：如果我在控制台中使用节点A.js启动脚本，那么A.js可以工作。如果从node express webserver开始，B.js/index.html就可以工作

我想将var xy数据从一个javascript文件A.js传输到另一个javascript文件B.js，并使用index.html将其可视化

A.js：从json使用node.js收集数据

B.js：基于从A.js收集的数据生成用于可视化的图表

index.html：在webbrowser中显示B.js中的图表

已经起作用的：

如果我在控制台中使用节点A.js启动脚本，那么A.js可以工作。如果从node express webserver开始，B.js/index.html就可以工作。图表/图表位于浏览器中。但是我如何将A.js与B.js/index.html结合起来呢？类似module.exports.xy的东西

A.js：

index.html

是的，基本上您需要导出从A.js返回数据并在B.js中使用的对象或函数。下面是一个如何使用模块的简单示例：

circle.js的内容：

foo.js的内容：

如果您需要更多的帮助来理解如何使用它，请发布代码示例，以便我们能够提供进一步的帮助

使现代化下面是一些示例代码，希望能帮助您开始使用和。它并不意味着完整，但希望能让您了解如何开始使用这两种技术将信息从服务器节点发送到客户端浏览器

从Node.js运行的Express API端点文件：

// This creates a HTTP GET endpoint for your Express app
// which will return the data when a user hits /my-endpoint
app.get("/my-endpoint", function(req, res) {
    // populate the data to return to the client
    var data = {
        XY: 5
    };

    // send the data
    res.send(data);
});

从浏览器运行的主干客户端代码：

// This creates a Backbone Model which will hit
// the API endpoint /my-endpoint
var DataModel = Backbone.Model.extend({
    url: "/my-endpoint"
});

// Create a new instance of the DataModel
var dataModel = new DataModel();

// A function to display the data contained within the dataModel
function displayData() {
    // write the data model to the browser's console
    console.log("dataModel: " + dataModel.toJSON());
}

// when the data model API call is complete, call the displayData function
dataModel.on("sync", displayData);

// fetch() == GET HTTP request to the URL specified in the model
// This will perform the HTTP request to the Express endpoint, and
// once complete, contain the data returned from the API.
// 
// Because we linked this to displayData, that function will be called
// once the fetch is complete.
dataModel.fetch();

嗨，谢谢你的回答，很抱歉我回复晚了。正如您在上面看到的，我包含了代码。A.js在代码末尾导出变量XY，B.js在脚本开头导入。当我用index.html启动B.js时，代码的执行在var input=require./B.js；处停止；。。。这条线之后的一切都不例外。如果我在B.js的末尾包含这一行，那么之前的所有内容都将被删除。作为结论：除了导入变量XY之外，所有内容都可以工作。我试图在浏览器中提醒，但它不起作用-更正我的第一条评论：var input=require./A.js；。。。根据我所看到的，您只需要启动运行B.js的节点，而不是B.jsSo，因为它将导入A.js，两者需要位于同一目录中。要启动B.js，您需要运行node B.js。我对index.html是如何包含在这个组合中有点困惑。节点应该运行这些文件，而不是浏览器，所以没有警报，而是一个console.log。这也正是让我困惑的地方。目标是在图表中分别显示从json文件中使用node收集的数据。浏览器当我在cmd中使用节点A.js启动A.js时，它就可以工作了。另一方面，浏览器向我显示在B.js中生成的图表。但是我想展示基于A.js数据的图表。如果有用的话：我也集成了index.html代码。。。我很高兴你能帮助我，谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Data_Monitoring</title>


    <!-- Cascading Style Sheets  -->
    <link href="css/custom.css" media="screen" rel="stylesheet" type="text/css" >
    <link href="css/rickshaw.css" media="screen" rel="stylesheet" type="text/css" >
    <link href="css/envision.css" media="screen" rel="stylesheet" type="text/css" >


</head>
<body>

    <h1>Title</h1>


    <!-- Drawing charts -->
    <div id="chart-type1"></div>
    <div id="chart-type2"></div>
    <div id="chart-type3"></div>


    <!-- JavaScript  -->
    <script type="text/javascript" src="lib/d3.min.js"></script>
    <script type="text/javascript" src="lib/rickshaw.js"></script>

    <script type="text/javascript" src="js/A.js"></script>
    <script type="text/javascript" src="js/lookupTable.js"></script>

    <script type="text/javascript" src="js/B.js"></script>


</body>
</html>

var PI = Math.PI;

exports.area = function (r) {
  return PI * r * r;
};

exports.circumference = function (r) {
  return 2 * PI * r;
};

var circle = require('./circle.js');
console.log( 'The area of a circle of radius 4 is '
       + circle.area(4));

// This creates a HTTP GET endpoint for your Express app
// which will return the data when a user hits /my-endpoint
app.get("/my-endpoint", function(req, res) {
    // populate the data to return to the client
    var data = {
        XY: 5
    };

    // send the data
    res.send(data);
});

// This creates a Backbone Model which will hit
// the API endpoint /my-endpoint
var DataModel = Backbone.Model.extend({
    url: "/my-endpoint"
});

// Create a new instance of the DataModel
var dataModel = new DataModel();

// A function to display the data contained within the dataModel
function displayData() {
    // write the data model to the browser's console
    console.log("dataModel: " + dataModel.toJSON());
}

// when the data model API call is complete, call the displayData function
dataModel.on("sync", displayData);

// fetch() == GET HTTP request to the URL specified in the model
// This will perform the HTTP request to the Express endpoint, and
// once complete, contain the data returned from the API.
// 
// Because we linked this to displayData, that function will be called
// once the fetch is complete.
dataModel.fetch();