将 AJAX get 调用中的查询参数传递给快速路由

Question

我现在正在使用 Node 的 twitter API 包装器，并试图弄清楚如何将查询参数从 HTML 表单传递到 AJAX 获取请求，然后将该参数传递到我的 Express 路由中，而不是不仅仅是让表单动作直接进入路由。

这是我的 HTML 代码

  <form id="searchTerm">
    Keyword:<input id="keyword" type="text" name="q" placeholder="Keyword">
    <input type="submit">
  </form>

我的客户端 Javascript

$(document).ready(function() {
  $('#searchTerm').on('submit', function() {
    $.ajax({
      type: 'GET',
      data: q,
      url: '/search/tweets/term',
      success: function(data) {
        console.log(data);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});

然后是我的 Node.JS 路由：

// Search by keywords or phrases
app.get('/search/tweets/term', function(req, res) {
  var q = req.query.q;

// Accesses the Twitter API and pulls back the respective tweets
  client.get('search/tweets', {q: q, count: 100, lang: 'en', exclude: 'retweets'}, function(error, tweets, response) {
    if(!error) {
      res.send(tweets);
    } else {
      console.log(error);
      res.status(500).send(error.stack);
    }
  });
});

但是，每当我在表单中输入值时，我的终端都会收到“查询缺少参数”错误消息。不知道我做错了什么。

更新

通过以下方式让它工作：

$(document).ready(function() {
  $('#searchTerm').on('submit', function(e) {
    e.preventDefault();
    var q = $('#keyword').val();

    $.ajax({
      type: 'GET',
      data: {q: q},
      url: '/search/tweets/term',
      success: function(data) {
        console.log(data);
      }
    })
  })
})

但是，由于我正在实现 e.preventDefault()，因此我丢失了 URL 中的查询参数。由于我想让用户能够将 URL 共享给特定的关键字，有没有办法能够在 URL 中保持这些参数完整，同时仍然让 JSON 发送到客户端？还是只需要在服务器端操作 JSON 并通过模板引擎呈现数据？

Answer 1

试试这个

$(document).ready(function() {
  $('#searchTerm').on('submit', function() {
    $.ajax({
      type: 'GET',
      data: q,
      url: '/search/tweets/term?q=',
      success: function(data) {
        console.log(data);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});