1

現在 http://garafu.blogspot.jp/2013/08/wcf-restful-web.html を参考に、
jsonからのデータを取得しhtmlに表示したいと考えています。

イメージとしては、下記の画像の入力欄に名前を入力しOKボタンを押下すると、
表示欄にjsonのデータが出力されるような感じです。

そこで、html上でrestを送る方法と、jsonのデータを取得する方法が分かりません。
宜しければご教授をお願いします。

画面

2
  • 分からない場所は具体的に言うとどのあたりでしょうか?
    – Shirone
    Commented 2015年3月6日 3:26
  • 説明不足で申し訳ありません html上でrestを送る方法と、jonのデータを取得する方法が分からない感じです Commented 2015年3月6日 3:30

1 件の回答 1

6

jqueryを利用した最もシンプルな方法は以下になります。

var name = $("[ここに入力欄のinputのセレクタ]").val();

$.get("[ここにjsonを返すURLを入力]", {name: name}, function(data){
  $("[ここに表示欄のinputのセレクタ]").val(JSON.stringify(data));
});

HTTP通信の種類を指定して実行するには以下になります。

var name = $("[ここに入力欄のinputのセレクタ]").val();

$.ajax({
  url: "[ここにjsonを返すURLを入力]",
  data: {name: name},
  type: "[ここにHTTP通信の種類(POST,PUT,DELETEなど)を入力]"
}).done(function(data){
  $("[ここに表示欄のinputのセレクタ]").val(data);
});

非同期で実行したくない場合は以下になります。

var name = $("[ここに入力欄のinputのセレクタ]").val();

var data = $.ajax({
  url: "[ここにjsonを返すURLを入力]",
  data: {name: name},
  type: ”[ここにHTTP通信の種類(POST,PUT,DELETEなど)を入力]",
  async: false
}).responseText;

$("[ここに表示欄のinputのセレクタ]").val(data);
5
  • 1
    補足事項として、 jQuery の ajax() を使う場合は type: PUTtype:DELETE の指定を追加することすることによって、HTTP通信の種類を変更することも可能です。(質問者さんが REST で、と仰ってるので言及させて頂きました)
    – Shirone
    Commented 2015年3月6日 3:53
  • ご指摘ありがとうございます。反映させていただきましたm(_ _)m
    – tutinoco
    Commented 2015年3月6日 4:03
  • async=falseは同期リクエストだと思います。
    – kotatsu
    Commented 2015年3月6日 4:14
  • ご指摘ありがとうございます。m(_ _)m
    – tutinoco
    Commented 2015年3月6日 4:17
  • 解決することが出来ました。 ありがとうございます。 Commented 2015年3月6日 6:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。