1

Возникла проблема при POST запросе с помощью библиотеки axios.

Вот сам POST запрос:

axios({
    method: 'post',
    url: 'ajax.php',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function(response) {

    console.log(response);

})
.catch(function (error) {
    console.log(error);
});

Это код файла ajax.php.

<?php
    echo json_encode($_POST);
?>

А результат запроса пустой массив data: Array(0).

Документация с примерами здесь.

В чем моя ошибка?

1

3 ответа 3

5

Принимайте данные из потока php://input так как от клиента идет не массив переменных, а строка в json формате.

Пример:

$_POST = json_decode(file_get_contents('php://input'), true);

и дальше работаете как обычно с массивом $_POST

3
  • Понятно, но это альтернативный вариант. А как можно от клиента сделать этот запрос что бы на сервер пошёл массив переменных, так как оно идёт на пример в запросах сделанных на jquery? 15 июл 2017 в 6:42
  • @RazmikGalstyan, это не обходной путь, так как в массив $_POST попадают данные отправленные с Content-Type = application/x-www-form-urlencoded или multipart/form-data, а axios отправляет данные с Content-Type = application/json, которые достаются из потока php://input.
    – Visman
    15 июл 2017 в 6:57
  • Я не говорю что вы дали не правильный ответ, но это точно альтернатива по скольку я нашел варианты отправки данных на сервер в нужном формате и с нужными заголовками. Но спасибо Вам, ваш ответ помог мне идти в нужном направлении. 15 июл 2017 в 7:33
3

@Visman правильно сказал про то что axios отправляет данные с заголовком header('Content-Type: application/json'); потому и данные не попадали в POST.

И я нашел два решения для POST запроса с помощью axios. Что бы отправлять на сервер данные нужного формата и с нужными заголовками.

Вот первый способ:

axios({
    method: 'post',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    url: 'ajax.php',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function(response) {

    console.log(response);

})
.catch(function (error) {
    console.log(error);
});

Надо было явно задать параметр headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

А это второй способ с применением URLSearchParams:

var params = new URLSearchParams();
params.append('firstName', 'Fred');
params.append('lastName', 'Flintstone');
axios({
    method: 'post',
    url: 'ajax.php',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function(response) {

    console.log(response);

})
.catch(function (error) {
    console.log(error);
});

А здесь с помощью URLSearchParams создаем объект данных что бы отправить их в формате application/x-www-form-urlencoded а не JSON

Примечание: URLSearchParams не поддерживается всеми браузерами. Поддержку броузеров URLSearchParams можете смотреть здесь.

5
  • Разве urlsearchparams будет не в GET значении? 15 июл 2017 в 12:33
  • @DanielProtopopov Как оно может быть в GET если я делаю POST запрос? 15 июл 2017 в 13:59
  • То и странно что обычно в GET передаются значения из URL, поэтому и уточняю. Видимо там такой механизм. 15 июл 2017 в 21:35
  • @DanielProtopopov Прочитайте ответ внимательно там не в URL предаются, а просто с параметры формируются. а после методом POST передаются в сервер. 15 июл 2017 в 21:37
  • ищу по этому же вопросу, но не понял куда использована переменная params в этом примере?
    – romanown
    30 дек 2021 в 17:07
1
var params = new URLSearchParams();
params.append('user_id', 1);
params.append('text', "Привет аксиос");
console.log(params);

axios.post('api/index.php', params);

Коллеги читайте документацию https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.