Question

请解释一下，为什么我的代码不起作用？我使用快速宽度把手，使用Jquery Ajax进行表单提交。第一次渲染正常，但第二次没有。我认为问题在于嵌套＆res; reder＆＃39;。希望你的答案： - ）

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

我认为使用on（）方法绑定委托事件的问题..

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

将其替换为

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

我使用快递和把手来模仿渲染模板

2 个答案: