2013-04-11 7 views
7

私は次のようなJSONデータを与えるURL「http://localhost:8888/api/rest/abc」を持っているを使用してUIへのURL(REST API)からJSONデータを取得する方法。 JqueryまたはJavaスクリプトを使用してこのデータをUIで取得したいとします。私は数時間からこれを試していますが、解決できません。この問題を解決するのに役立ついくつかの解決策を私に提案してください。jqueryのやJavaスクリプト

{ 
    "My-user": [ 
    { 
     "link": [ 
     { 
      "href": "http://localhost:8888/api/rest/abc/MI/CH", 
      "rel": "self", 
      "type": "application/my.My.My-user+xml", 
      "title": "rln" 
     }, 
     { 
      "href": "http://localhost:8888/api/rest/cabin?MI=mi&CH=ch", 
      "rel": "some relation", 
      "type": "application/my.My.My-cabin+xml", 
      "title": "rln1" 
     } 
     ], 
     "My-user-list": [ 
     { 
      "name": "cuba", 
      "Explanation": "bark" 
     } 
     ], 
     "CH": "ch", 
     "MI": "mi", 
     "password": "xyz", 
    }, 
    { 
     "link": [ 
     { 
      "href": "http://localhost:8888/api/rest/abc/DD/KN", 
      "rel": "self", 
      "type": "application/my.My.My-user+xml", 
      "title": "rln" 
     }, 
     { 
      "href": "http://localhost:8888/api/rest/cabin?DD=dd&KN=kn", 
      "rel": "some relation", 
      "type": "application/my.My.My-cabin+xml", 
      "title": "rln1" 
     } 
     ], 
     "My-user-list": [ 
     { 
      "name": "Cuba1", 
      "Explanation": "bark1" 
     } 
     ], 
     "KN": "kn", 
     "DD": "dd", 
     "password": "xyz1", 
    } 
    ] 
} 

私は、コードが間違っているなら、私を修正してください、これは以下の私のコードである私のために働いていないGetjsonを試してみました。

$(function(){ 
    $.getJSON('/api/rest/abc', function(data) { 
     console.log(data); 
    }); 
}); 
+0

これは期待された出力です、コードを見せてください。これまでに何を試しましたか? –

+0

こんにちはNilこのURLは、Node.jsを介して生成され、サーバーを起動した後サーバーを実行した後にURLを開きますlocalhost:8888/api/rest/abcそれから私は次のJSONを与えますが、 – Sau

答えて

11

は、あなたのjsの中で次のようにサーバーにAJAX要求を送信し、成功の機能で、あなたの結果を得る:

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

<script> 
$.getJSON('/api/rest/abc', function(data) { 
    console.log(data); 
}); 
</script> 
</head> 

<body> 

</body> 

</html> 
+1

*非同期:偽*なぜ地球上の? – Tommi

+0

私はGETメソッドを使用しています。GETメソッド – Sau

+0

のために使用するように案内してください。@Sauは私のanswer.andを編集しました。 –

4

あなたは私たちにjqueryの機能getJsonを使用することができます。

サーバ側では、jsonタイプとして応答を送信します。

そして、あなたはあなたのアプリケーションのためのjQuery.getJSONを使用することができます。

+0

私はあなたのコードをチェックし、私が間違いを犯した場所を教えてください私のために働いていない上記の私の質問でgetJsonとupdatedtheコードを試してみました。 – Sau

+0

WebサービスのGETまたはPOSTの方法は何ですか? –

+0

方法は、あなたの残りのWebサービスの戻り値の型が、それはその「@Produces(MediaType.APPLICATION_JSON)」のようなJSONを返すです – Sau

4

ネイティブJSを使用すると、外部ライブラリに頼る必要がなくなります。デフォルトでは

fetch('/api/rest/abc') 
    .then(response => response.json()) 
    .then(data => { 
     // Do what you want with your data 
    }) 
    .catch(err => { 
     console.error('An error ocurred', err); 
    }); 

はそれがGETを使用して、あなたドン:

いかなる場合にも、エラーをキャプチャすることができ What is ES2015?

fetch('/api/rest/abc') 
    .then(response => response.json()) 
    .then(data => { 
     // Do what you want with your data 
    }); 

(私はいくつかのES2015の構文、別名ES6、近代的なJavaScriptを使用します)ヘッダーを指定する必要はありますが、必要に応じてすべてを行うことができます。さらに参考:Fetch API reference