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.
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())
})
});