Как отправить данные на сервер с помощью fetch()?

Question

[dch3]

Есть две кнопки, при клике пользователя на одну из них, при помощи fetch отправляется значение кнопки, на которую кликнули, на сервер.

js:

let element = document.querySelector('.radio');

    element.addEventListener('click', function(event) {
        let cat = fetch("http://my-site/transaction", {
            method: 'POST',
            body: event.target.value
        })
        .then(response => response.json())
        .then(data => data);
    });

скрипт php:

Route::get('/test', function (Request $request) {

    $data = $request->all();

    foreach ($data as $value) {
        if ($value == 'income') {
            $categories = Category::where('transaction', 'income')
                ->pluck('category')
                ->unique();
        } 
        elseif ($value == 'expenses') {
            $categories = Category::where('transaction', 'expenses')
                ->pluck('category')
                ->unique();
        }
    }
    return (string) $categories;
});

Проблема в том, что при отправке этого запроса значение event.target.value из запроса fetch не приходит на сервер.
Т.е. директива $data = $request->all() скрипта php показывает, что переменная $data пуста

Comments

[JhaoDa]

Ну так и причем тут ларавел?

[dch3]

Маршрут на писан на Laravel

[JhaoDa]

dch3, и?

[dch3]

@JhaoDa
и все))

[JhaoDa]

dch3, ясно, слабо понимаешь, что делаешь...

[dch3]

@JhaoDa
скорее всего да
я только делаю первые шаги поэтому и вопросы задаю согласно своего понимания
Буду благодарен, если обьясните суть вашего вопроса

Answer 1

[Malmind]

Данные отправляются на сервер, дело в том что PHP не понимает данные, которые ему приходят, чтобы это исправить нужно в заголовках указать 'Content-type': 'application/x-www-form-urlencoded', а в тело запроса передать данные формата key=value&key=value&..., тогда их можно будет увидеть в массиве $_REQUEST (соответственно в request laravel тоже).

let element = document.querySelector('.radio');

    element.addEventListener('click', function(event) {
        let cat = fetch("http://my-site/transaction", {
            method: 'POST',
            headers{
                   'Content-type': 'application/x-www-form-urlencoded'
           }
            body: `radio=${event.target.value}`,
            
        })
        .then(response => {response.json())
        .then(data => data);
    });

Comments

[dch3]

@Malmind
Спасибо!

Answer 2

[Denis Melnikov]

Как минимум это
event.target.value
Меняем на это
JSON.stringify({"value":event.target.value})

а так же логируем что у вас есть в value , дабы там не было пусто

Comments

[dch3]

Спасибо!