Асинхронно передать объект в контроллер и вернуть асинхронно нужное значение

Question

Делаю конвертер валют, использую Spring Boot, JPA, Thymeleaf.

Есть 2 выпадающих списка, внутри них находится List готовый список котировок, взятых из БД. Нужно чтобы при выборе котировки слева и справа, сразу "на лету" считался курс одной валюты к другой. Допустим слева выбрано USD, справа RUB, и в нижних двух полях ввода должно получиться 1 (USD) 75,000 (RUB)

Я не могу передать выбранное значение в выпадающем списке в контроллер асинхронно, как это сделать ?

**HTML: **

<form action="/currency"  method="post">
    <div class="form-row text-center">
        <div class="form-group col-md-4 mt-4">
            <select th:field="*{currencies}" id="currency1" class="form-control" >
                <option th:each="c : ${currencies}" th:value="${c.getCharCode()}"
                        th:text="${c.getCharCode() + ' ('+ c.getName() + ') '}"></option>
            </select>
        </div>
        <div class="form-group col-md-4 ml-4 mt-4">
            <select th:field="*{currencies}" id="currency2" class="form-control" >
                <option th:each="c : ${currencies}" th:value="${c.getCharCode()}"
                        th:text="${c.getCharCode() + ' ('+ c.getName() + ') '}"></option>
            </select>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4 mt-4">
            <input class="form-control" type="text" name="firstValue" placeholder="1"/>
        </div>
        <div class="form-group col-md-4 ml-4 mt-4">
            <input class="form-control" type="text" name="secondValue" placeholder="1"/>
        </div>
    </div>
    <button class="btn btn-primary mb-4" type="submit">Конвертировать</button>
</form>

Контроллер

@GetMapping(value = "{firstCurrencyCharCode}")
public @ResponseBody Currency getSomething(@PathVariable String firstCurrencyCharCode) {
    return currencyService.getCurrencyByCharCode(firstCurrencyCharCode);
}

Класс Currency

public class Currency {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String valuteId;
    private String numCode;
    private String charCode;
    private int nominal;
    private String name;
    private String value;

Answer 1

Передал объект в контроллер таким способом

$(document).ready(function () {
        $('#currency1').on('change', async function () {
            let body = {
                charCode: $(this).val()
            }

            let response = await fetch('/currency/test', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(body)
            })

            let result = await response.json()
           
        })
    })

БЛОГ НА HUSL

Асинхронно передать объект в контроллер и вернуть асинхронно нужное значение

Ответы (1 шт):