Untitled

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{templates/layout}"
      xmlns:th="http://www.thymeleaf.org">


<body>
<section layout:fragment="content">
<div class="transaction" th:if="${!transactions.isEmpty()}">
    <div class="columns" th:object="${transactions[0]}">

        <div class="level main-dev">
            <div class="column is-one-fifth has-text-centered code-dev">
                <p class="title" th:text="*{transactionCode}"></p>
            </div>


        </div>
    </div>
</div>
</section>
<th:block layout:fragment="script">
    <script th:src="@{/resources/js/transaction-page.js}"></script>
</th:block>
</body>
</html>

$('.search-btn').click(function (event) {
        var element = $(this);
        event.preventDefault();

        var searchRequest = {};
        searchRequest["merchantCode"] = $('#merchantCode').val();

        url = $('#transactionSearchDTO').attr("action");

        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: url,
            data: JSON.stringify(searchRequest),
            dataType: 'json',
            cache: false,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-Type", "application/json");
            },
            success: function (data) {
                console.log("SUCCESS: ", data);
            },
            error: function (e) {
                console.log("ERROR: ", e);
            },
            done: function (e) {
                console.log("DONE");
            }
        });

});

@RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public SearchResponseDTO getTransactionListForSearch(Model model, @RequestBody Map<String, String> dataMap) throws TransactionRetrievalException, RestRequestException {
        TransactionSearchDTO transactionData = new TransactionSearchDTO();
        transactionData.setMerchantCode(dataMap.get("merchantCode"));
        List<TransactionDTO> transactions = cardTransactionService.getTransactionList(transactionData);
        return new SearchResponseDTO(transactions,false);
}