node/express 中的 AJAX 调用似乎没有返回数据

Question

我第一次尝试在我的 node/express 应用程序中实现 AJAX，但我对我的代码发生了什么感到困惑。我想从一个表单中获取几个输入，然后运行一个计算，在同一页面上显示结果。

我的 router.js：

router.get('/ajax', verified, function(req, res){
    res.render('ajax');
});

router.post('/ajax', verified, function(req, res) {
    if(req.xhr || req.accepts('json,html')==='json'){
        res.send({success: true});
    } else {
        res.redirect(303, '/ajax');
    }
});

我的 html 的一部分：

<form action ="/ajax" class="form-horizontal pesoForm" method="POST" role="form">
  <div class="form-group">
    <label for="#" class="col-sm-2 control-label">Model Type</label>
    <div id="porton-search" class="col-sm-6">
      <input class="form-control" type="text" autocomplete="off" placeholder="Search for porton" name="portonModel">
    </div>
  </div>

  <div class="form-group">
    <label for="#" class="col-sm-2 control-label">Alto Libre</label>
    <div class="col-sm-4">
      <div class="input-group">
        <input type="text" class="form-control" id="#" placeholder="Alto" name="alto">
        <div class="input-group-addon">cm</div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="#" class="col-sm-2 control-label">Ancho Libre</label>
    <div class="col-sm-4">
      <div class="input-group">
        <input type="text" class="form-control" id="#" placeholder="Ancho" name="ancho">
        <div class="input-group-addon">cm</div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-warning">Calculate</button>
    </div>
  </div>
</form>

<div class="resultContainer col-sm-12"></div>

我的 jquery ajax 脚本在底部：

<script>
    $('document').ready(function(){
      $('form').on('submit', function(e){
          e.preventDefault();
          var action = $(this).attr('action');

          $.ajax({
            url: action,
            method: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(data) {
              console.log(data);

              if(data.success){
                $('.resultContainer').html('<p>It worked</p>');
              }  else {
                $('.resultContainer').html('<p>Oops, there was a problem</p>');
              }
            },
            error: function(){
              $('.resultContainer').html('Oops we have a problem');
            }
          });
      });
    });
</script>

当我在本地服务器上运行它时，我得到了控制台中返回的对象 {success: true} 和 html '它工作'。

但是，我不确定如何获取我的表单数据。 Console.log(data) 似乎只是返回 {success:true}。

请注意，我确实有 bodyParser 中间件。

Answer 1

jQuery ajax 调用只会获取您从 express 返回的内容。所以在这种情况下，您返回的只是{success: true}。在 express 中，您可以通过req.body.alto 访问 post 变量。在 express 中，您可以进行任何您想要的计算并返回一个表示该计算结果的对象，而不仅仅是成功为真。

附带说明，我相信您会想使用res.json() 发回 JSON 数据。 res.send 将发回字符串数据，jQuery 会为您纠正，但由于许多原因，我现在不会进入，这是不好的做法