使用ResponseEntity <list <string>&gt;在Ajax GET请求之后

时间:2017-08-17 08:23:11

标签: java jquery ajax spring spring-mvc

我使用Java/Spring MVC RESTful网络项目,这是我用来从后端获取List<String>的方法,

@RequestMapping(value = "/transactions/{walletId}", method = RequestMethod.GET)
    public ResponseEntity<List<String>> readAllTransactionsByWalletId(@PathVariable("walletId") Long walletId) {

        WalletModel walletModel = getWalletModel(walletId);

        if (Objects.isNull(walletModel)) {
            return new ResponseEntity<List<String>>(HttpStatus.NOT_FOUND);
        }

        List<Transaction> transactions = walletModel.getTransactions();

        List<String> list = new ArrayList<>();

        for (Transaction transaction : transactions) {
            list.add(walletModel.addTransactionHistory(transaction));
        }

        return new ResponseEntity<List<String>>(list, HttpStatus.OK);
    }

我想从客户端向方法创建Ajax request并使用数据。 HTML页面就像是一样,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Wallet Transactions</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="css/main.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
          type="text/css">

    <!--JavaScript sources-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="js/main.js"></script>

    <!-- custom JavaScript for the page to execute -->
    <script>

        // set as the global variable in the context
        var walletName, walletAddress, walletCurrency;
        var baseUrl = "http://localhost:8080";

        // generic request function interact with the RESTful methods
        function request() {
            $.ajax({
                // url: url,
                // we use localhost for the testing
                url: baseUrl + url,
                method: method,
                data: data
            })
        };

        // extract the value from the parameter and the URL
        // If the UR is like "/WalletClient/sendMoney.html?walletId=12&walletName=puut"
        // after calling the getParameterByName("walletId") will return the value of 12
        // where the URL is in default value
        function getParameterByName(name, url) {

            // if the url value is not provided, assume
            // we need to use the url of the page
            if (!url) {
                url = window.location.href;
            }

            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);

            if (!results) return null;
            if (!results[2]) return '';

            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }


        var parameterName = "walletId";
        var urlName = window.location.href;

        // extract the wallet Id from the URL
        var walletId = getParameterByName(parameterName, urlName);


        $(document).ready(function () {

            // fill out the Id with the dummy values
            $("#currency").text("currency");
            $("#address").text("address");
            $("#balance").text("balance");
            $("#transactions").text("transactions");


            // curl -G http://localhost:8080/rest/transactions/1 | json with GET request

//            @RequestMapping(value = "/transactions/{walletId}", method = RequestMethod.GET)
//            public ResponseEntity<List<String>> readAllTransactionsByWalletId(@PathVariable("walletId") Long walletId) {
//
//                // some code
//            }

            request("/rest/transactions/" + walletId, "GET").done(function (data) {

                // we have the data with is in the form of ResponseEntity<List<String>>
            });
        });

    </script>
</head>


<body id="page-top" class="index">


<!-- get all the transactions info here-->
<div id="show_transactions">
    <div>
        <h4>Wallet Name = <span id="walletName"></span></h4>
    </div>

    <div>
        <h4>Currency = <span id="currency"></span></h4>
    </div>

    <div>
        <h4>Address = <span id="address"></span></h4>
    </div>

    <div>
        <h4>Balance = <span id="transactions"></span></h4>
    </div>
</div>


</body>
</html>

request内,我希望GET方法会返回List<String>,我想迭代它并填入<div>

<div>
    <h4>Balance = <span id="transactions"></span></h4>
</div>

我怎么能这样做?

更新

我现在没有真实数据,但cURL请求返回

enter image description here

更新2

我修改了代码以填充一些生成的数据,但它仍然返回[]。我使用IntelliJ并清理了Cache并重新启动。代码 -

        List<String> test = new ArrayList<>();

        test.add("Berlin");
        test.add("Miami");
        test.add("Seattle");
        test.add("Copenhagen");

       return new ResponseEntity<List<String>>(test, HttpStatus.OK);

知道为什么会这样吗?

1 个答案:

答案 0 :(得分:0)

我这样做了,

<div class="swiper-button-next swiper-button-white"></div>