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

时间:2013-08-04 10:46:59

标签: javascript html node.js

我是Node.js的新手,这是我的第一个项目。 我创建了一个名为test.js的node.js文件。它有一个数组说a。

现在我想在按钮点击事件上创建一个调用此test.js的HTML文件。然后从该文件中获取数据并将其发布到HTML文件中的表中。

我已经编写了node.js文件,我可以在console.log(a)上看到结果。但我不明白如何将此数组发送到HTML时它会要求它。

与此同时,我用Google搜索并编写了一些代码。请求到达服务器但我始终从服务器获得错误响应。为什么这样?

客户端 -

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

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

2 个答案:

答案 0 :(得分:15)

您应首先设置服务器来处理请求。我使用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)
   });
});

这应该让你去。

答案 1 :(得分:0)

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