2017-08-10 85 views
1

我開發了Java/Spring RESTful服務,它返回JSON上的cURL請求。例如,如果我提供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開發客戶端,請求Ajax。例如,提供,比方說,在前端的代碼,它創建了錢包信息(name+space+address)這樣一個下拉菜單,

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

我看到tutorial的例子,但是,我需要在創建HTML頁面後知道,我是否需要編寫一個控制器來調用它或什麼? e.g

@Controller 
public class MyClass{ 

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

Ajax請求一些示例代碼段會幫我上手。怎麼做?

+2

您可以使用jQuery GET/POST方法。你試過這個:https://www.w3schools.com/jquery/jquery_ajax_get_post.asp – Maddy

+0

我更新了這個問題。我可以根據需要使用'Ajax' – Arefe

+1

不需要任何控制器 - 就像您可以從'curl'調用一樣,您也可以從'jquery.ajax'調用 –

回答

3

這是使用ajax的代碼示例。它顯示瞭如何調用您的rest controller.port可以根據您的配置而有所不同,但通常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例子的評論中問,所以我給你一個想法。我沒有任何關於你的下拉的信息。

更新:

<!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後,我應該在哪裏放置登錄頁面或如何訪問它?我是否需要一個'Controller'來訪問登錄頁面? – Arefe

+1

你可以把它放在'home.jsp'中。 –

+0

好的,我需要一個控制器來調用'home.jsp'嗎? – Arefe

1

使用jQuery:

$.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); 
      } 
})