The variables never reach PHP from the FETCH API

Question

I have 3 files (HTML,JS and PHP) in the HTML save de info in variable called DatosPaciente in JavaScript

function Tomar_DATOS(){            
  DatosPaciente={
    id:document.getElementById("paciente_id").value,
    fecha:document.getElementById("fecha").value
};}

Then i use a function called Tiene_Cita_Hoy inside of a JS file

Tiene_Cita_Hoy(DatosPaciente)

in the JS file i try to use the Fetch API to send info to the PHP file

function Tiene_Cita_Hoy(Datos){
console.log(Datos);//"{id: "8", fecha: "2020/09/03"}" here everything is fine
    fetch('tiene_cita.php',{
        method: 'POST',
        body: Datos
    })                           
        .then(res => res.json()) 
        .then(data => {                     
            console.log(data); //to see the result
        })
 }        

then in a PHP file, then tried to receive the information via POST

  $VALOR_id_paciente=$_POST['id']; 
  $VALOR_fecha=$_POST['fecha'];

and then I assign those values ​​to a query

$SQL="SELECT * FROM vhsagenda WHERE PACIENTE='".$VALOR_id_paciente."' AND FECHA='".$VALOR_fecha."'";
echo json_encode($SQL);//just to see what information have

but the result is always: SELECT * FROM vhsagenda WHERE PACIENTE='' AND FECHA=''

apparently the information never reaches the PHP file

Answer 1

I have made some proper way for this method to get working. You need to make an object first, then pass it in 'for loop'. It will generate string like this for example (test=123&test_two=444)

async function catch_something(url, bodyContent = {test: 123, test_two: 444}){
let bodyContent_string = '';
if(bodyContent instanceof Object){
    for(const form_key of Object.keys(bodyContent)){
        if(form_key != Object.keys(bodyContent)[Object.keys(bodyContent).length - 1]){
            bodyContent_string += `${form_key}=${bodyContent[form_key]}&`;
        }else{
            bodyContent_string += `${form_key}=${bodyContent[form_key]}`;
        }
    }
}
const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: bodyContent_string
}).catch((error) => {
    console.error('Error:', error);
});
if(!response.ok){
    throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
}

Answer 2

You've passed a plain object to the body parameter, but fetch doesn't know what to do with that data type (so it converts it to the useless string "[object Object]").

You should pass something that fetch knows how to convert into something supported by PHP instead.

e.g. a FormData object.

DatosPaciente = new FormData(document.getElementById("form_containing_your_inputs"));

Answer 3

You should send the parameters as a URL-encoded string.

function Tomar_DATOS(){            
  DatosPaciente = 'id=' + encodeURIComponent(document.getElementById("paciente_id").value) + '&fecha=' + encodeURIComponent(document.getElementById("fecha").value);
}