@alex4825

При отправке данных через axios.post на php-файл и открытии этого php-файла через кнопку формы html массив $_POST пустой?

Есть файл index.php с html-кодом, в котором форма с некоторыми input-ми:
<div id="vueArea" class="body">
<form @submit="onSubmit" method="POST" action="/files/server.php">
<!--Какая-то html-вёрска c input-ми и {{vue-переменными}}-->
<button type="submit" class="button"'>Получить результат</button>
</form>
</div>
<script src="/files/script.js"></script>


Далее файл /files/script.js с функцией onSubmit, которая срабатывает при нажатии на кнопку:
new Vue({
    el: '#vueArea',
methods: {
        async onSubmit() {
            let formData = new FormData();
            formData.append("name", "value");
            await  axios.post("/files/server.php", formData)
.then((response) => {
                console.log('SUCCESS!!');
                console.log(response.data);
            })
                .catch(function () {
                    console.log('FAILURE!!');
                })
})


И файл /files/server.php, на котором я пытаюсь обратиться к массиву $_POST:

<?php

declare(strict_types=1);

var_dump($_POST);

?>


Запускаю приложение на localhost:8080
При нажатии на кнопку открывается страница файла /files/server.php, где var_dump($_POST); выводит массив только с теми данными, которые есть в форме в тегах input, а переменных из js файла ("name" => "value" в данном случае) в нём нет. В исходном коде страницы, в консоли выводится сообщение FAILURE!!, то есть, срабатывает блок catch.
Если к событию onSubmit добавить модификатор prevent (), запретив этим перезагрузку страницы (файл /files/server.php не открывается, остаёмся на index.php), то в исходном коде, в консоли выводится сообщение SUCCESS!! и
массив axios.post запроса, то есть данные из него отправлены.

Перепробовал всё, что только можно. Отправлял данные и в JSON формате:
axios.post("/files/server.php",
                {
                    data: {
                        "name": "value"
                    },
                    headers: {'content-type': 'application/x-www-form-urlencoded'},
                })
                .then( (response) => {
                    console.log('SUCCESS!!');
                    console.log(response.data);
                })
                .catch(function () {
                    console.log('FAILURE!!');
                })

Принимая их в /files/server.php из php://input так:
try {
   $data = json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR);
} catch (JsonException $e) {
    echo $e;
}

var_dump(file_get_contents('php://input'));

Здесь json_decode выбрасывает исключение, кстати:
JsonException: Syntax error in C:\Users\"имя пк"\Desktop\Work\repo\task_calculator\files\server.php:10
Stack trace:
#0 C:\Users\"имя пк"\Desktop\Work\repo\task_calculator\files\server.php(10): json_decode()
А var_dump($data); выводит NULL
Но в файле php://input всё те же данные из form html при открытии /files/server.php, что и раньше, данных axios нет, в консоли FAILTURE!!. Аналогично первому примеру с модификатором .prevent, в консоли выведет SUCCESS!! и нужный массив(только в формате JSON), отправленный через axios.post.
Резюмирую: нужно при нажатии кнопки перейти на страницу /files/server.php, в котором получить доступ к данным из axios.post, данные из form html в принципе не нужны
Уже почти неделю пытаюсь это решить, всё перепробовал. Помогите пожалуйста!
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
@Jurasey
Backend Developer
У вас данные отправляет форма и vue-приложение.
Форма отправляет успешно и поэтому видите результат в POST.
Чтобы проверять только vue:
- Уберите у формы action

* Можете заменить @submit="onSubmit" на @submit.prevent="onSubmit" это позволит не перезагружать страницу после клика по кнопке.

Лучше поэтапно проверьте что:
- Пришло с формы во Vue
- Vue отправил
- Пришло в server.php
- Пришло в ответе
Ответ написан
Ваш ответ на вопрос

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

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