2016-11-01 2 views
0

私はDisplay Animalというボタンを持つ簡単なhtmlファイルを持っています。私は、さまざまな動物が何らかの形で保存されている別個の.jsonファイルを持っています。私がしようとしているのは、Display Animalのクリックです。このjsonファイルから情報を取り出し、それを画面上のテーブルに表示したいと思います。 Express、Node、jQuery、Javascriptを使用しています。私は単純なhtmlファイルを表示するサーバーを実行していることに注意してください。私はこれをどうやって行うのかについてはほとんど分かりません。私のhtmlファイルのように、そこにonClickメソッドがありますか、それとも私のサーバーファイルにありますか?また、この情報を取得するにはどうすればよいですか?私はGETまたはPOST要求を使用してこれを達成しようとしています。テーブル内の.jsonから情報を取得するためのポストリクエストを送信するためのHTMLボタン

答えて

0

フロントエンドライブラリ(jQueryやAngularなど)を使用していますか、JavaScriptでこれをネイティブに実行しようとしていますか?

前者の場合、それぞれにHTTPリクエストAPIが組み込まれています(例:jQuery.POST()または$http)。後者の場合は、ネイティブXMLHttpRequestを調べたいと思うでしょう。

洗練された答えではありませんが、あなたの質問は非常に広いです。私はあなたにドキュメントを読んでおきます。

+0

AngularではなくjQueryを使用しています。私はJavaScriptだけを好みますが。私はjQueryの経験があまりありませんでした。 –

+0

私の最初のリンクは、読んでおく必要があるドキュメントです。 – brandonscript

0

それは100%の作業コードではありませんが、あなたのGETをフォーマットする方法のアイデアを与える

var app = express(); 

app.get ('/animals', function (req, res){ 
// your code to parse and return your list of animals, function (err, data) { 
res.end (data) } 

ようなものになるだろう表現で、あなたのバックエンドでGETサービスを作成します。

次に、ボタンをクリックしてjquery.get()を使用するか、javascript xmlhttprequestを書き出すことができます。

Jqueryは簡単ですが、自分でやりたければ、javascriptでxhrを書く際のチュートリアルがたくさんあります。

編集:getリクエストに応じてこれを書いています。投稿を使用する場合は基本的に同じですが、jquery.post()を使用すると、他の回答が示唆するようになり、app.getの代わりにapp.postになります。

動物のようなデータを取得する場合は、変更する必要がない情報のみを表示しています。機密情報を渡さない限り、目的が正しく機能しません。

関連する問題