AJAX скрипт не делает запрос по указанному адресу

Question

Метод контроллера Spring Boot:

    @PostMapping("/bills/add")
    @ResponseBody
    public String createBill(@RequestParam String currency) {
        
        String phone = authentication().getName();
        String answer = null;
        if(currency.isEmpty()) {
            answer = "Please choose currency type";
            return answer;
        }
        accountService.addBill(phone, currency);
        answer = "Success!!!";
        return answer;
    }

Thymeleaf:

<div>
<form id="currency_form">
        <select class="form-control" th:id="currency" th:name="currency" style="width:auto">
            <option value="">Select currency</option>
            <option th:each="currency : ${T(com.github.irybov.bankdemoboot.Currency).values()}"
                    th:value="${currency.name()}"
                    th:text="${currency.name()}">
            </option>
        </select>
    <button type="submit" class="btn btn-success add_bill">
        Add new bill</button>

    <p th:text="${message}" th:value="${#strings.isEmpty('currency')}" class="error"/>
</form>
</div>

JQuery:

<script>
    $(document).ready(function(){
        $('.add_bill').click(function(){
            var type = ('#currency').val();
            $('#currency_form').submit(function (ev) {
                ev.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:8080/bankdemo/bills/add?currency='+type,
                    success: function(msg) {
                        alert(msg);
                    }
                    error: function (xhr, statusText, err) {
                      alert(xhr.status);
                    }
                });
            });
        });
    });
</script>

HTML изначально формируется по адресу

http://localhost:8080/bankdemo/accounts/show

    @GetMapping("/accounts/show")
    public String getAccount(ModelMap modelMap) {

        String current = authentication().getName();        
        AccountResponseDTO account = accountService.getAccountDTO(current);
        modelMap.addAttribute("account", account);
        modelMap.addAttribute("currencies", currencies);

        return "/account/private";
    }

так вот проблема в том, что почему-то при выполнении AJAX url становится в браузерной строке

http://localhost:8080/bankdemo/accounts/show?currency=USD

вместо того, чтобы выполнить запрос по пути, который указан в скрипте.
Если через Postman забить правильный url руками, то метод контроллера отлично отрабатывает, возвращая строку ответа и статус 200.

Answer 1

Полагаю, что все из-за того что вы пытаетесь передать данные через адресную строку.

Это POST запрос, а значит данные должны быть переданы через тело запроса.

Для этого есть параметр data

Попробуйте следующее

Пробрасываем CSRF

<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

<script>
    $(document).ready(function(){
        // как-то сильно много обработчиков у вас в скрипте
        // уберем лишнее
        // $('.add_bill').click(function(){
            // отсюда валюту убрал
            $('#currency_form').submit(function (ev) {
                ev.preventDefault();
                // ПЕРЕНЕС СЮДА ОПРЕДЕЛЕНИЕ ВАЛЮТЫ
                var type = $('#currency').val();
                // еще Вы у себя забыли знак доллада перед ('#currency')
                // получаем название заголовка и значение токена
                var token = $("meta[name='_csrf']").attr("content");
                var header = $("meta[name='_csrf_header']").attr("content");
                // определяем массив с заголовками запроса и прокидываем в него CSRF
                var requestHeaders = {};
                requestHeaders[header] = token;
                $.ajax({
                    type: 'POST',
                    // убираем данные из урла
                    url: 'http://localhost:8080/bankdemo/bills/add', 
                    // передаем данные в тело запроса
                    data: {
                        "currency": type
                    },
                    // пробрасываем в запрос наши заголовки
                    headers: requestHeaders,
                    success: function(msg) {
                        alert(msg);
                    }, // <- ЗАПЯТУЮ ЕЩЕ ЗАБЫЛИ
                    error: function (xhr, statusText, err) {
                      alert(xhr.status);
                    }
                });
            });
        // }); // это закрытие обработчика кнопки. его мы убрали пока что
    });
</script>

БЛОГ НА HUSL

AJAX скрипт не делает запрос по указанному адресу

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