從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); } }); }); });