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＆＃39;它工作了＃。

但是，我不确定如何获取表单数据。 Console.log（数据）似乎只返回{success：true}。

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

Answer 1

jQuery ajax调用只能获得你从express返回的内容。因此，在这种情况下，您返回的只是{success: true}。在express中，您可以通过req.body.alto访问帖子变量。在快递中，你可以做任何你想要的计算，并返回一个代表该计算结果的对象，而不仅仅是成功为真。

在旁注中，我相信您会希望使用res.json()发送回JSON数据。 res.send会发回字符串数据，jQuery会为你纠正，但是由于我现在不会进入的很多原因，这是不好的做法

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

1 个答案: