2017-08-10 15 views
1

cURLリクエストでJSONを返すサービスJava/Spring RESTfulを開発しました。私はcURL要求などを提供する場合、例えば、Java/Spring RESTfulサービスのクライアントを作成する

curl -G http://localhost:8080/rest/wallets | json 

は、私がリクエストの応答を取得し、

[ 
    { 
    "name": "Puut", 
    "address": "mv7eLe6vva4SJ96tZiczd1XPYiUxgUudAX" 
    }, 
    { 
    "name": "Rool", 
    "address": "n4W2zC6WE98SAAnKEJoatvELnbiLeVFZFf" 
    }, 
    { 
    "name": "Ouup", 
    "address": "mj5DZbgngdK2Wnz4Q7Gv2UGYRyGSYnuhG6" 
    } 
] 

は、私はプロジェクトの構造が提供され

@RestController 
@RequestMapping("/rest") 
public class WalletRestController { 

    @Autowired 
    private WalletService walletService; 

    @Autowired 
    private UserService userService; 

    @RequestMapping(value = "/wallets", method = RequestMethod.GET) 
    public ResponseEntity<List<WalletInfoWrapper>> getAllWalletInfo() { 

     List<WalletInfo> walletInfos = walletService.getAllWallets(); 

     if (Objects.isNull(walletInfos)) { 
      return new ResponseEntity<List<WalletInfoWrapper>>(HttpStatus.NO_CONTENT); 
     } 

     List<WalletInfoWrapper> walletInfoWrappers = new ArrayList<>(); 

     // hiding the entity ids for the security purposes 
     walletInfos.forEach(w -> walletInfoWrappers.add(new WalletInfoWrapper(w.getName(), w.getAddress()))); 

     return new ResponseEntity<List<WalletInfoWrapper>>(walletInfoWrappers, HttpStatus.OK); 
    } 

    // some code 

} 

のコードを持っています、

enter image description here

リクエストでRESTfulのクライアントを開発する必要があります。例えば、フロントエンドでは、言う、提供されたコードは、それがこのような財布情報(name+space+address)とドロップダウンメニューを作成し、

|----------------------------------------| 
|Puut mv7eLe6vva4SJ96tZiczd1XPYiUxgUudAX| 
|----------------------------------------| 
|Rool n4W2zC6WE98SAAnKEJoatvELnbiLeVFZFf| 
|----------------------------------------| 
|Ouup mj5DZbgngdK2Wnz4Q7Gv2UGYRyGSYnuhG6| 
|----------------------------------------| 

は私がtutorialの例を参照してください、しかし、私はする必要がありHTMLページを作成した後に、それを呼び出すためのコントローラーを作成する必要がありますか?例えば

@Controller 
public class MyClass{ 

     @RequestMapping(value = "/", method= RequestMethod.GET) 
     public String showHome(){ 
      retrurn "home.html"; 
     } 
} 

Ajax要求にいくつかのサンプル・コード・スニペットは、私が始めるのに役立ちます。どうやってするか?

+2

あなたはjQueryの取得/ POSTメソッドを使用することができます。これを試しましたか:https://www.w3schools.com/jquery/jquery_ajax_get_post.asp – Maddy

+0

私は質問を更新しました。要求通りに 'Ajax'を使うようになりました – Arefe

+1

コントローラーは必要ありません - ' curl'から呼び出すことができるように 'jquery.ajax'からも呼び出すことができます –

答えて

3

これはajaxを使用したコードサンプルです。それはあなたの残りのcontroller.portを呼び出す方法を示していますあなたのconfig.butに依存することができますが、通常はtomcatは8080ポートを使用します。

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
$.ajax({ 
    type: 'GET', 
    url: 'http://localhost:8080/rest/wallets', 
    data: '', 
    success: function (responseData) { 

      console.log(JSON.stringify(responseData)); 
    }, 
    complete: function (textStatus) { 

    }, 
    error: function (responseData) 
    { 
    } 
}); 

@Artinあなたはので、私はあなたのアイデアを与える完全なHTML例えばコメントに尋ねたよう。私はドロップダウンに関する情報はありません。

更新:jQueryのを使用して

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Rest Service Calling example</title> 
 

 
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
 
    
 
    <script type="text/javascript"> 
 
    
 
\t function getData(){ 
 
\t \t $.ajax({ 
 
\t \t \t type: 'GET', 
 
\t \t \t /*If you need some basic authentication then you need to include it also. 
 
      'Access-Control-Allow-Origin' is for CORS issue*/ 
 
\t \t \t /*headers:{ 
 
\t \t \t \t "Authorization": "Basic *********", 
 
\t \t \t \t 'Access-Control-Allow-Origin':'*' 
 
\t \t \t },*/ 
 
\t \t \t 
 
\t \t \t url: 'http://localhost:8080/rest/wallets', 
 
\t \t \t /*Since you don't send any data, so data will be empty*/ 
 
\t \t \t data: '', 
 
\t \t \t success: function (responseData) { 
 
\t \t \t \t console.log(JSON.stringify(responseData)); 
 
\t \t \t \t $('#result').html(JSON.stringify(responseData)) 
 
\t \t \t }, 
 
\t \t \t complete: function (textStatus) { 
 
\t \t \t \t 
 
\t \t \t }, 
 
\t \t \t error: function (responseData) 
 
\t \t \t { 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
    </script> 
 
    
 
    <style> 
 

 
    </style> 
 

 
    </head> 
 
    <body> 
 
    <p>Data From Server : </p> 
 
    <div id="result" ></div> 
 
\t <input type="button" value="Get Data" onclick="getData()"> 
 
    </body> 
 
</html>

+0

Tomcatを実行した後で、ランディングページをどこに置くのですか?リンク先ページにアクセスするには「コントローラ」が必要ですか? – Arefe

+1

あなたは 'home.jsp'に置くことができます。 –

+0

いいえ、 'home.jsp'を呼び出すコントローラが必要ですか? – Arefe

1

$.ajax({ 
    url: 'wallets', 
    data: 'myAnyParameterIfNeeded=parameterValue', 
    success : function(response) { 
       var results = JSON.parse(response); 
       // here you can use for loop for iterating into *results* 
       var rowOneName = JSON.stringify(results[0]['name']); 
      } 
    error : function(e){ 
       alert('HTTP error number=' + e.status); 
      } 
}) 
関連する問題