現在 http://garafu.blogspot.jp/2013/08/wcf-restful-web.html を参考に、
jsonからのデータを取得しhtmlに表示したいと考えています。
イメージとしては、下記の画像の入力欄に名前を入力しOKボタンを押下すると、
表示欄にjsonのデータが出力されるような感じです。
そこで、html上でrestを送る方法と、jsonのデータを取得する方法が分かりません。
宜しければご教授をお願いします。
現在 http://garafu.blogspot.jp/2013/08/wcf-restful-web.html を参考に、
jsonからのデータを取得しhtmlに表示したいと考えています。
イメージとしては、下記の画像の入力欄に名前を入力しOKボタンを押下すると、
表示欄にjsonのデータが出力されるような感じです。
そこで、html上でrestを送る方法と、jsonのデータを取得する方法が分かりません。
宜しければご教授をお願いします。
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);
type: PUT
や type:DELETE
の指定を追加することすることによって、HTTP通信の種類を変更することも可能です。(質問者さんが REST で、と仰ってるので言及させて頂きました)