Expess -> Seite wird nicht gerendert.

[Christoph]

Hallo Leute,

ich bin neu in der Webentwicklung. Seit einigen Wochen habe ich mir viele Tutorials angesehen und diverse kleine Testprojekte umgesetzt. Jetzt habe ich ein Projekt gestartet und nun poppen die die ersten Probleme auf, es war klar dass das kommt.

Für mein Projekt verwende ich Node.js mit Express und für die EventHandler der Controls wollte ich mit Ajax arbeiten. Das arbeiten mit den ejs Templates funktioniert schon mal sehr gut.

Ich gehe aktuell wir folgt vor um eine Seite zu rendern:

var personManager = require('../dataAccess/samplePerson');

module.exports = (app) => {

        app.get('/person', (request, response) => {

        var listOfPerson = personManager.getPerson();

        response.render('person', { listOfPerson: listOfPerson });       
    });
};

Das funktioniert soweit schon mal gut, die Liste mit den Personen wird angezeigt.

Die Liste mit Personen soll mit einem Button geladen werden. (später soll es verschiedene Buttons mit Optionen geben) Den Event Handler für den Button habe ich so umgesetzt:

$(document).ready(function () {

    $('#loadAll-btn').on('click', function () {
 
      $.ajax({
        type: 'GET',
        url: '/person/' + '?loadBy=loadAll' ,
        success: function(data){
          //do something with the data via front-end framework
          //location.reload();
        }   
      });
 
    });
  });

Das Event wird gefeuert, das habe ich mit console.log(..) an verschiedenen Stellen im Controller nachgewiesen.

Nun hatte ich ich folgende Idee im Controller auf die unterschiedlichen Parameter zu reagieren.

module.exports = (app) => {

    app.get('/person', (request, response) => {

        var loadRequest = request.query;

        if (loadRequest.loadBy === 'loadAll') {
            //Liste befüllen
            console.log('loadAll');

            var listOfPerson = personManager.getPerson();

            response.render('person', { listOfPerson: listOfPerson });
        }
        else {
            //Leere Liste übergeben
            console.log('load nothing');

            response.render('person', { listOfPerson: [] });
        }
    });
};

Die Liste wird so nicht gerendert und ich verstehe nicht warum, bis auf die If-Verzweigung ist doch alles gleich geblieben.

Wenn ich im Broser: person/?loadBy=loadAll eingebe wird die Liste ebenfalls nicht gerendert und die Seite verliert die Referenz zum CSS, sie wird ohne Styles gezeichnet.

Warum funktioniert das so nicht? Könnte mir bitte jemand sagen was ich anders machen muss?

Herzliche Grüße
Christoph