Ich bin in Rendering-Vorlagen mit Express und Lenker stecken

Question

Bitte erklären Sie mir, warum mein Code nicht funktioniert? Ich benutze Express-Breiten-Lenker, für Formular senden mit Jquery Ajax. Der erste Rendervorgang funktioniert ordnungsgemäß, der zweite jedoch nicht. Ich denke, dass das Problem darin besteht, 'res.render' zu verschachteln. Hoffe auf eure Antworten :-)

app.js

var express = require('express'); 
var app = express(); 
var template = require('consolidate'); 
var handlebars = require('handlebars'); 
var bodyparser = require('body-parser'); 

app.use(bodyparser.urlencoded({extended: false})); 
app.engine('hbs', template.handlebars); 
app.set('view engine', 'hbs'); 
app.set('views', __dirname); 

app.get('/', function(req, res) { 
    res.render('index', { 
    myName: 'John' 
    }); 
}); 
app.post('/', function(req, res) { 
    var obj = {surname: req.body.surname, age: req.body.age}; 
    res.render('Layout.hbs', obj, function(err, html) { 
    if(err) { 
     console.log(err); 
    } else { 
     console.log(html); 
     res.render('index.hbs', { 
     content: html 
     }) 
    } 
    } 
); 
}); 

app.listen(8080, function() { 
    console.log('App listening on 8080'); 
}); 

index.hbs

<div class="wrapper"> 
    <div class="container"> 
     <p>{{myName}}</p> 
    </div> 
    <form action="" name="form" id="form" method="post"> 
     <input id="surname" type="text" name="surname" placeholder="surname"><br/> 
     <input id="age" type="text" name="age" placeholder="age"><br/> 
     <input type="submit"> 
    </form> 
    {{{content}}} 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('form').on('submit', function(e) { 
     e.preventDefault(); 
     var form = $(this); 
     var surname = form.find('#surname').val(); 
     var age = form.find('#age').val(); 
     $.ajax({ 
      type: 'POST', 
      data: {surname: surname, age: age}, 
      success: function(res) { 
      console.log('Success'); 
      }, 
      error: function(err) { 
      console.log(err); 
      } 
     }); 
     }); 
    }); 
    </script> 

Layout.hbs

<div class="inner-container"> 
    <h1>{{surname}}</h1> 
    <h2>{{age}}</h2> 
    <p>Render</p> 
</div> 

Answer 1

Ich glaube, Sie haben Recht, das Problem ist, mit verschachtelten res.render. Wenn Sie res.render aufrufen, rendert es einen HTML-Code und sendet es an den Client mit einem Statuscode 200.

Sie können app.render auf Root-Ebene und res.render nur innerhalb einer Route/Middleware aufrufen. Aber denken Sie daran, res.render verwendet app.render intern, um Vorlagedateien zu rendern. Ich glaube nicht, dass das Template separat gerendert werden muss.

Ich hoffe, die Antwort hilft Ihnen. Es wäre besser für mich zu antworten, wenn ich das Fehlerprotokoll sehen könnte, das Sie erhalten. Wenn Sie das zur Verfügung stellen, würde ich meine Antwort entsprechend ändern.

Answer 2

Ich denke Problem mit mit Delegation Ereignisbindung auf() -Methode ..

$('form').on('submit', function(e) { 

es ersetzen

von

$(document).on('submit','form', function(e)){