我开发了Java/Spring RESTful
服务,在JSON
次请求上返回cURL
。例如,如果我提供cURL
请求,例如
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
}
提供了项目结构,
我需要为RESTful
Ajax
请求开发客户端。例如,在前端提供的代码,它会创建一个下拉菜单,其中包含钱包信息(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
请求的示例代码段将帮助我开始使用。怎么做?
答案 0 :(得分: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">
function getData(){
$.ajax({
type: 'GET',
/*If you need some basic authentication then you need to include it also.
'Access-Control-Allow-Origin' is for CORS issue*/
/*headers:{
"Authorization": "Basic *********",
'Access-Control-Allow-Origin':'*'
},*/
url: 'http://localhost:8080/rest/wallets',
/*Since you don't send any data, so data will be empty*/
data: '',
success: function (responseData) {
console.log(JSON.stringify(responseData));
$('#result').html(JSON.stringify(responseData))
},
complete: function (textStatus) {
},
error: function (responseData)
{
}
});
}
</script>
<style>
</style>
</head>
<body>
<p>Data From Server : </p>
<div id="result" ></div>
<input type="button" value="Get Data" onclick="getData()">
</body>
</html>
答案 1 :(得分:1)
使用JQuery:
<router-outlet></router-outlet>