web-dev-qa-db-fra.com

Obtenir des données du fichier Node.js et les afficher dans une page HTML/JS

Je suis nouveau sur Node.js et voici mon premier projet. J'ai créé un fichier node.js nommé test.js. Il a un tableau dire un.

Maintenant, je veux créer un fichier HTML qui appelle cet événement test.js on click. Ensuite, récupérez les données de ce fichier et publiez-les sur une table du fichier HTML.

J'ai déjà écrit le fichier node.js et je peux voir les résultats sur console.log (a). Mais je ne comprends pas comment envoyer ce tableau en HTML quand il le demandera. 

En attendant, j'ai googlé et inventé du code. La demande parvient au serveur mais la réponse d'erreur du serveur est toujours présente. Pourquoi

Côté client - 

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

Du côté serveur :

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

Je peux voir la Chine sur la console. Mais je ne récupère pas le tableau de résultats au client. Ici, le résultat est un tableau et sa valeur est affichée sur la console. Juste que je ne le renvoie pas au client. De l'aide ?

javascripthtmlnode.js
8
Wayne Rooney

Vous devriez commencer par configurer un serveur pour répondre aux demandes. J'utilise expressjs pour cela - http://expressjs.com/

Cela vous permettra d’exécuter nodejs en tant qu’application Web. 

Configurez une route dans Express JS pour servir vos données - 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);

Ouvrez un navigateur et tapez http://MY_SERVER_ADDR:3000/data. Vous devriez y voir votre sortie.

Ensuite, vous devrez attacher un gestionnaire pair à votre fichier HTML qui déclenchera une demande $ .get () lorsqu’il sera déclenché. Ajoutez l'URL précédente à vos données dans votre appel $ .get et faites quelque chose avec.

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

Cela devrait vous faire avancer. 

15
JohnP

Après avoir lutté avec la même question, j’ai trouvé que c’est exactement là qu’un moteur de gabarit entre dans l’image de nœud. EJS l’a résolu pour moi, mais il en existe beaucoup plus. This article compare 10 moteurs de template.

0
Marc de Ruyter