将 thymeleaf 表值发送到 controller

Question

I want to send my thymeleaf table row to controller using ajax according to button click. Below how I try so far

<button id="sisi" type="button" class="btn btn-primary" th:text="#{aji}">

<tr id="rikaList" th:each="rika:${allRikas}">
     <td th:text="${rika.customer.customerNumber}"></td>
     <td th:text="${rika.customer.customerName}"></td>
     <td th:text="${rika.customer.nicNo}"></td>
</tr> 

<script type="text/javascript">
    $("#sisi").on('click', function () { 
        var contents = $("#rikaList").val();
        $.ajax({
            type: 'GET',
            url: "/bow/generateReport/" + contents,
            data: {},
            success: function (response) {

            }
        });
    })
</script>  

Below you can see my controller

@GetMapping(path = "/bow/generateReport/{rikaList}")
public void getCustomerByBranch(@PathVariable List<Rika> rikaList) {

}

Answer 1

I don't know if I've understand what you want to do but I think you should use POST and send the list inside the body.

Controller

@PostMapping(path = "/bow/generateReport")
public void getCustomerByBranch(@RequestBody List<Rika> rikaList) {

}

JS:

var rikaList = [] //create the list with values you need
var request = $.ajax({
    url : '/bow/generateReport',
    type : 'POST',
    data : JSON.stringify(rikaList),

    ...
});

How to create the list:

You have defined tr with id, maybe you want to put the id into parent, because the th:each will repeat the tr with the id I think. So, with id into tag instead:

var rikaList = []
    $('#rikaList > tbody > tr').each(function(index, tr) {
        var rika = {
            customerNumber: tr.cells[0].innerText, 
            customerName:tr.cells[1].innerText, 
            nicNo:tr.cells[2].innerText}
        rikaList.push(rika)
    });

There will be better ways to iterate through the table but if the structure is always the same yo can create the object list.