0

I am trying to get away from jQuery and start using promises and arrow functions. Try as I might, I can't seem to pass data to PHP using javascript fetch.

$btnarrmem.addEventListener('click',()=>{
        let $url = "getMember.php";
        let $data = {vid: '527571'}
        $data = JSON.stringify($data);
        console.log ($data);
        fetch ($url, {
            method:'POST',
            headers :{
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=utf-8'
            },
            body:$data
        })

        .then((response)=>{
            console.log (response.text())


        })

The result is always

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: *"Notice</b>:  Undefined index: data in /mnt/development/websites/arrows/getMember.php< on line <b>7<*emphasized text**

Which means to me that PHP is not getting data.

Here is the same function written using jQuery and it works just as I want it to

let $data = {vid: '527571'}
$data = JSON.stringify($data);
console.log($data);
$('button.qrymem').click(function () {
    let $data = {vid: '527571'}
    $data = JSON.stringify($data);
    console.log ($data);
    $.post('getMember.php', {data: $data}, function ($result) {
        console.log($result);
        $divquery.text($result);
    })

})

I'd appreciate any suggestions to get me moving in the proper direction.

Dave Davis
  • 574
  • 1
  • 4
  • 14

1 Answers1

0

jQuery URL-encodes the data. You need to call encodeURIComponent() to do that, and then pass it as the value of the data parameter. The equivalent with fetch() is:

$btnarrmem.addEventListener('click', () => {
  let $url = "getMember.php";
  let $data = {
    vid: '527571'
  };
  $data = JSON.stringify($data);
  console.log($data);
  fetch($url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `data=${encodeURIComponent($data)}`
    })

    .then((response) => {
      console.log(response.text())


    })
});
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Unfortunately, this does not work for me. I get the same error "undefined index data..." What does work is changing the php code to $data = file_get_contents('php://input'; But this then breaks jQuery. – Dave Davis Apr 22 '22 at 16:52
  • Need to fix the `Content-type` header. – Barmar Apr 22 '22 at 16:54