2017-05-02 6 views
1

私は今、ノード用のTwitter APIラッパーを使用していますが、HTMLフォームからAJAX getにクエリパラメータを渡す方法を理解しようとしていますフォームアクションがルートに直接行くのではなく、そのパラメータが私のExpressルートに渡されるようにしてください。AJAXからのクエリパラメータを急行ルートに呼び出す

ここに私の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); 
    } 
    }); 
}); 

フォームに値を入力するたびに私の端末に「パラメータ」エラーメッセージが表示されます。私が間違っていることを確信していない。

UPDATE

それは、次の経由作業ガット:

$(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を操作して、テンプレートエンジン経由でデータをレンダリングする必要がありますか? Q、 `あなたは` q`を定義しました:

+1

'データを試してみてください? –

+0

データ: "q" quotes? – Icewine

+0

フォームの送信を禁止します。なぜなら、あなたのAjaxが結果を取得しているにもかかわらず、Webページが次のページに移動しているからです... – deostroll

答えて

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

+0

あなたの「これを試してください」の説明はありますか?たとえば、コードが動作している理由、およびOPコードが動作していない理由などです。 – Mark

+0

彼は値を取得するためにqパラメータを必要とするノードパラメータでvar q = req.query.qを使用しています。 –

関連する問題