qnixdev
@qnixdev
Trainee PHP

Как отправить axios запрос из одного метода в другой в Symfony?

Доброго времени суток ув. знатоки!

Есть задача.
Необходимо реализовать отправку запроса из одного метода:
#[Route("/ship", name: "show_ship", methods: ["GET"])]

в другой метод через axios:
#[Route("/ship", name: "ship_battle", methods: ["POST"])]


Первый показывает корабли и форму для выбора параметров боя.
Второй, - результат боя и он показывается когда наживается кнопка "В бой!"

Пока что все смешано в одном контроллере, просьба не критиковать, это все черновой вариант. Суть в том что бы из первого метода получить через axios ответ и направить его во второй метод.

axios запрос:
const $battleContainer = $('.battle-box');
const $resultContainer = $('.result-box');

$resultContainer.hide();

$battleContainer.find('button').click(evt => {
    evt.preventDefault();

    let s1 = document.getElementById('ship1');
    let s2 = document.getElementById('ship2');

    let ship1key = s1.options[s1.selectedIndex].value;
    let ship2key = s2.options[s2.selectedIndex].value;
    let ship1Quantity = document.getElementById('quantity_ship1').value;
    let ship2Quantity = document.getElementById('quantity_ship2').value;

    const $submitData = () => {
        try {
            return axios.post(
                "/ship",
                {
                    ship1key: ship1key,
                    ship2key: ship2key,
                    ship1Quantity: ship1Quantity,
                    ship2Quantity: ship2Quantity
                }
            );
        } catch (error) {
            console.log(error);
        }
    }

    $submitData().then(resp => {
        $resultContainer.show();
    });
});


Форма из которой ловлю (все не переносил, только ключевые моменты):
<div class="battle-box">
    <form action="{{ path('ship_battle') }}" method="POST">
        <input id="quantity_ship1">
        <select id="ship1">
        <input id="quantity_ship2">
        <select id="ship2">
        <button type="submit">В атаку!</button>
    </form>
</div>


Метод контроллера в котором получаю запрос:
#[Route("/ship", name: "ship_battle", methods: ["POST"])]
public function battle(Request $request): Response
{
    dd($request->getContent());

    /* code */
}


Если убрать в js evt.preventDefault(); то получаю то что ввел в форме, мне же нужно получить именно от ajax.
Что я делаю не так?
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
@php_raper
1. axios и ajax это две разные библиотеки.
2. Если убрать в js evt.preventDefault(), то у вас форма будет отправляться стандартным методом POST как у вас указанно и на адрес который указан в action.
3. Вешайте событие на форму on submit, на vanila js и jq будет обработка выглядеть по разному, посмотрите примеры.
$('.battle-box form').on('submit', function (e) { e.preventDefault() ...... })

4. Если хотите избавиться от e.preventDefault() вам надо избавиться от тега form
5. Зачем try / catch, axios возвращает Promise, try/catch не нужен. К примеру
axios.post(url).then(result => {
    console.log('success', result);
}).catch(error => {
    console.log(error.response);
});

7. $resultContainer.show(); Вы просто отображаете контейнер, а если хотите вывести данные
$resultContainer.html(response.data)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы