7524


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

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

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

![画面](https://i.stack.imgur.com/701Uf.png)


CC BY-SA 3.0
2015-03-06T03:23:26.243
7520
2015-03-06T12:32:57.343
2015-03-06T03:29:00.843
7626
7626
question
javascript html json rest
jsonをjavascriptで取得しhtmlに表示したい


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

[code]

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

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

[code]

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

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

[code]

    var name = $("[ここに入力欄のinputのセレクタ]").val();
    
    var data = $.ajax({
      url: "[ここにjsonを返すURLを入力]",
      data: {name: name},
      type: ”[ここにHTTP通信の種類（POST,PUT,DELETEなど）を入力]",
      async: false
    }).responseText;
    
    $("[ここに表示欄のinputのセレクタ]").val(data);
    
[/code]


CC BY-SA 3.0
2015-03-06T03:39:28.170
7524
2015-03-06T12:32:57.343
2015-03-06T12:32:57.343
8351
8351
7520
answer