Abrufen von Daten aus der Node.js-Datei und Anzeigen in der HTML/JS-Seite

Question

Ich bin neu bei Node.js und dies ist mein erstes Projekt damit. Ich habe eine node.js-Datei namens test.js erstellt. Es hat ein Array sagen a.

Jetzt möchte ich eine HTML-Datei erstellen, die diese test.js auf Button-Click-Ereignis aufruft. Holen Sie dann die Daten aus dieser Datei und veröffentlichen Sie sie in einer Tabelle in der HTML-Datei.

Ich habe bereits die Datei node.js geschrieben und ich kann die Ergebnisse auf console.log (a) sehen. Aber ich kann nicht verstehen, wie man dieses Array an HTML sendet, wenn es danach fragt.

Währenddessen habe ich gegoogelt und etwas Code erfunden. Die Anfrage erreicht den Server, aber ich bekomme immer eine Fehlerantwort vom Server. Warum?

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-Seite:

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 China auf dem console.But sehen kann ich das Ergebnis Array zurück an den Client zurück nicht. Hier ist ein Array und ich bekomme seinen Wert auf der Konsole. Nur, dass ich es nicht zum Kunden zurückbekomme. Irgendeine Hilfe ?

Answer 1

Sie sollten damit beginnen, einen Server einzurichten, der Anfragen bedient. Ich verwende expressjs für diese - http://expressjs.com/

Dies ermöglicht es Ihnen, Nodejs als Webanwendung ausführen.

Richten Sie eine Route in Express.js Ihre Daten dienen - 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); 

einen Browser öffnen und Typ in http://MY_SERVER_ADDR:3000/data und Sie sollten Ihren Ausgang dort sehen.

Als nächstes müssen Sie einen even-Handler an Ihre HTML-Datei anhängen, die eine $ .get() - Anfrage auslöst, wenn sie ausgelöst wird. Fügen Sie die vorherige URL zu Ihren Daten in Ihrem $ .get-Aufruf hinzu und machen Sie etwas damit.

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

Das sollte dich gehen.

Answer 2

Nachdem ich mit der gleichen Frage gerungen habe, habe ich festgestellt, dass genau hier eine Template Engine in das Node-Bild kommt. EJS löste es für mich, aber es gibt viel mehr verfügbar. Diese article vergleicht 10 Vorlagen-Engines.