javascript - Getting Data from Node.js file and displaying it in HTMLJS page - Stack Overflow

admin管理员组

文章数量:1193316

I am new to Node.js and this is my first project with it. I have made a node.js file named test.js. It has an array say a.

Now I want to make a HTML file that calls this test.js on button click event. Then get the data from that file and publish it on a table in the HTML file.

I have already written the node.js file and I can see the results on console.log(a). But I cant understand how to send this array to HTML when it will ask for it.

Meanwhile, I googled and made up some code. The request reaches the server but I always get error response from server. Why so?

Client Side -

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

Server side :

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

I can see China on the console.But I dont get back the result array back to the client. Here result is an array and I get its value on the console. Just that I dont get it back to the client. Any help ?

I am new to Node.js and this is my first project with it. I have made a node.js file named test.js. It has an array say a.

Now I want to make a HTML file that calls this test.js on button click event. Then get the data from that file and publish it on a table in the HTML file.

I have already written the node.js file and I can see the results on console.log(a). But I cant understand how to send this array to HTML when it will ask for it.

Meanwhile, I googled and made up some code. The request reaches the server but I always get error response from server. Why so?

Client Side -

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

Server side :

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

I can see China on the console.But I dont get back the result array back to the client. Here result is an array and I get its value on the console. Just that I dont get it back to the client. Any help ?

• javascript
• html
• node.js

Share Improve this question Follow edited Aug 4, 2013 at 14:57 Wayne Rooney asked Aug 4, 2013 at 10:46 Wayne RooneyWayne Rooney 1,60733 gold badges1919 silver badges2323 bronze badges 2

• You need to run nodeJS as an http server and have it serve the data on request. Then you need to update your HTML file so that it makes an AJAX call to your nodejs server on button click. – JohnP Commented Aug 4, 2013 at 11:00
• @JohnP: Thanks for commenting. Could you write it as an answer in details. I am very new to node.js – Wayne Rooney Commented Aug 4, 2013 at 11:03

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 21

You should start by setting up a server to serve requests. I use expressjs for this - http://expressjs.com/

This will allow you to run nodejs as a web application.

Setup a route in express JS to serve your data - 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);

Open up a browser, and type in http://MY_SERVER_ADDR:3000/data and you should see your output there.

Next, you'll need to attach an event handler to your HTML file that will trigger a $.get() request when it is triggered. Add the previous url to your data in your $.get call and do something with it.

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

That should get you going.

After wrestling with the same question, i found that this is exactly where a template engine comes into the node-picture. EJS solved it for me, but there are many more available. This article compares 10 template engines.

本文标签： javascriptGetting Data from Nodejs file and displaying it in HTMLJS pageStack Overflow