エクスプレスとハンドルバーを使用してレンダリングテンプレートが残っています

Question

私のコードが機能しない理由を教えてください。 Jquery Ajaxを使用してフォームを送信するために、私はエクスプレス幅のハンドルバーを使用しています。最初のレンダリングは正しく動作しますが、2番目のレンダリングは正しく動作しませ問題は「res.render」を入れ子にすることだと思います。私はあなたが正しいと思います

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

に願って、問題があります入れ子になったres.render。 res.renderに電話すると、htmlをレンダリングし、クライアントにステータスコード200で送信します。

ルートレベルでapp.render、ルート/ミドルウェア内でres.renderと呼ぶことができます。しかし、res.renderはapp.renderを内部的に使用してテンプレートファイルをレンダリングすることに注意してください。私は別々にテンプレートをレンダリングする必要はないと思います。

回答がお役に立てば幸いです。あなたが得ているエラーログを見ることができたら、私が答えてくれる方が良いでしょう。あなたがそれを提供すれば私はそれに応じて私の答えを変えるでしょう。

Answer 2

私は

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

...（）メソッドにして委任イベントを結合して、問題を考える

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