Question

我已经在这里查看了几个现有的问题。他们全部用于提交帖子请求，但获取请求的机制应该相同，因此我修改了我的代码以用于获取请求。但它无法正常工作。

错误：我提交了一个表单，但页面继续重新加载（现在它正在重定向到包含json数据的新页面。

我想做什么：提交表单，防止重新加载，并在同一个html页面上显示json数据

<div class="row">
  <div class="col-md-3">
    <form method="GET" action="/search">
      <div class="form-group">
        <input type="text" class="form-control" id="term" name="term" placeholder="Find">
        <br>
        <input type="text" class="form-control" id="location" name="location" placeholder="Near">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

<script>
  $(function() {
    $('form').submit(function(event) {
      event.preventDefault();
      var $this = $(this);
      $.get($this.attr('action'), function(data) {
        $('pre').text(data);
      });
    });
  });
</script>

在我的快递代码中，我有这个：

app.get('/search', function(req, res) {
var apiUrl = getApiUrl(req.query);

var apiData = getApiData(apiUrl, function(statusCode, data) {
    // console.log(data);
    // res.render('api-guide', data);
    res.send(data);
  });
});

我应该注意，我使用把手进行模板化。因此表单位于自己的模板中，而jquery脚本位于主模板中。这就是为什么它不按预期工作的原因吗？

有人可以帮帮我吗？

Answer 1

您正在表单中设置与AJAX请求冲突的操作参数。如果删除

action="/search"

并直接在AJAX请求中设置路径

$.get('/search', function(data) {
    $('pre').text(data);
  });

从您的表单声明中，它应该按预期工作。

如何在不重新加载的情况下提交表单并使用Node + Express将数据传回同一页面

1 个答案: