Lấy dữ liệu từ tệp Node.js và hiển thị nó trong trang HTML/JS

Question

Tôi mới sử dụng Node.js và đây là dự án đầu tiên của tôi với nó. Tôi đã tạo tệp node.js có tên là test.js. Nó có một mảng nói a.

Bây giờ tôi muốn tạo tệp HTML gọi test.js này trên sự kiện nhấp nút. Sau đó lấy dữ liệu từ tệp đó và xuất bản nó trên một bảng trong tệp HTML.

Tôi đã ghi tệp node.js và tôi có thể thấy kết quả trên console.log (a). Nhưng tôi không thể hiểu làm thế nào để gửi mảng này để HTML khi nó sẽ yêu cầu nó.

Trong khi đó, tôi googled và tạo một số mã. Yêu cầu đến máy chủ nhưng tôi luôn nhận được phản hồi lỗi từ máy chủ. Tại sao như vậy?

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

tôi có thể thấy Trung Quốc trên console.But Tôi không lấy lại mảng kết quả lại cho khách hàng. Ở đây, kết quả là một mảng và tôi nhận được giá trị của nó trên bảng điều khiển. Chỉ cần tôi không lấy lại cho khách hàng. Bất kỳ giúp đỡ?

Answer 1

Bạn nên bắt đầu bằng cách thiết lập máy chủ để phân phát các yêu cầu. Tôi sử dụng expressjs cho việc này - http://expressjs.com/

Điều này sẽ cho phép bạn chạy các nút như một ứng dụng web.

Thiết lập một tuyến đường trong nhanh JS để phục vụ dữ liệu của bạn - 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); 

Mở ra một trình duyệt, và gõ http://MY_SERVER_ADDR:3000/data và bạn sẽ thấy đầu ra của bạn ở đó.

Tiếp theo, bạn sẽ cần đính kèm trình xử lý đồng đều vào tệp HTML sẽ kích hoạt yêu cầu $ .get() khi được kích hoạt. Thêm url trước đó vào dữ liệu của bạn trong cuộc gọi $ .get và làm điều gì đó với nó.

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

Điều đó sẽ giúp bạn tiếp tục.

Answer 2

Sau khi đấu vật với cùng một câu hỏi, tôi thấy rằng đây chính xác là nơi một công cụ mẫu đi vào ảnh nút. EJS đã giải quyết nó cho tôi, nhưng có nhiều hơn nữa. Điều này article so sánh 10 công cụ tạo mẫu.