Pobieranie danych z pliku Node.js i wyświetlanie ich na stronie HTML/JS

Question

Jestem nowym użytkownikiem Node.js i jest to mój pierwszy projekt. Zrobiłem plik node.js o nazwie test.js. Ma tablicę powiedzieć.

Teraz chcę utworzyć plik HTML, który wywoła to test.js w zdarzeniu kliknięcia przycisku. Następnie pobierz dane z tego pliku i opublikuj je w tabeli w pliku HTML.

Napisałem już plik node.js i widzę wyniki na console.log (a). Ale nie mogę zrozumieć, jak wysłać tę tablicę do HTML, gdy poprosi o to.

W międzyczasie szukałem w Google kodu i wymyśliłem. Żądanie dociera do serwera, ale zawsze otrzymuję odpowiedź błędu z serwera. Dlaczego tak?

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

po stronie serwera:

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

widzę Chin na console.But dont odzyskać tablicę wyników z powrotem do klienta. Oto wynik tablicy i otrzymuję jej wartość na konsoli. Tylko, że nie dostaję go z powrotem do klienta. Jakaś pomoc ?

Answer 1

Powinieneś zacząć od skonfigurowania serwera do obsługi żądań. Używam expressjs do tego - http://expressjs.com/

To pozwoli ci uruchomić nodejs jako aplikację internetową.

Konfiguracja trasy w wyraźnej JS służyć Twoje dane - 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); 

otworzyć przeglądarkę i wpisać http://MY_SERVER_ADDR:3000/data i powinieneś zobaczyć tam swoje wyjście.

Następnie należy załączyć procedurę obsługi parzystości do pliku HTML, która uruchomi żądanie $ .get(), gdy zostanie uruchomione. Dodaj poprzedni URL do swoich danych w wezwaniu $ .get i zrób z nim coś.

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

To powinno cię zabrać.

Answer 2

Po tym, jak zmagałem się z tym samym pytaniem, odkryłem, że jest to dokładnie miejsce, w którym silnik szablonu pojawia się w obrazie węzła. EJS rozwiązał to dla mnie, ale jest o wiele więcej dostępnych. Ten zestaw article porównuje 10 silników szablonów.