I'm trying to display params of a fetch. From fetch I call a php script passing parameters I want to display.
The JavaScript code:
const fichero = "/proves/php/accion_formulario.php";
let tp_curso = document.getElementById("actualizar_nombre").value;
let vr_curso = document.getElementById("version_lenguaje").value;
let pr_curso = document.getElementById("programa_curso").value;
let fp_curso = document.getElementById("ficheros_curso").value;
let vp_curso = document.getElementById("videos_curso").value;
let respuesta = fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'nom=tp_curso&versio=vr_curso&programa=pr_curso&fitxers=fp_curso&
&fitxers=fp_curso&videos=vp_curso&ncurs=curso_actualizar',
headers: {"Content-type": "application/text; charset=UTF-8"}
})
.then(respuesta => respuesta.text())
.then(respuesta => {
alert(respuesta);
})
.catch(error => alert("Se ha producido un error: " + error));
The php code:
$this -> n_curso = $_POST["nom"];
$this -> titulo_curso = $_POST["versio"];
$this -> version_curso = $_POST["programa"];
$this -> programa_curso = $_POST["fitxers"];
$this -> dir_ficheros_curso = $_POST["videos"];
$this -> dir_videos_curso = $_POST["ncurs"];
$this -> params[0] = $this -> n_curso;
$this -> params[1] = $this -> titulo_curso;
$this -> params[2] = $this -> version_curso;
$this -> params[3] = $this -> programa_curso;
$this -> params[4] = $this -> dir_ficheros_curso;
$this -> params[5] = $this -> dir_videos_curso;
print_r($this -> params);
What I dipslay is an empty array:
Array
(
[0] =>
[1] =>
[2] =>
[3] =>
[4] =>
[5] =>
)
I read this post but I couldn't fix the issue.
What I'm doing wrong?
Thanks
Your parameters object literal contains the key headers twice, which takes the latter value (which unfortunately no longer is a syntax error). You're sending application/text; charset=UTF-8 instead of application/x-www-form-urlencoded for the Content-Type, so PHP won't parse the parameters as you expect.
To fix it, use
fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: '…',
})
.then(respuesta => respuesta.text())
.then(respuesta => {
alert(respuesta);
})
.catch(error => alert("Se ha producido un error: " + error));
Also notice that your body is currently a hardcoded string, not taking into account the variables. To do this you'd need to
use a template string (or string concatenation) with escaping the values yourself:
body: `nom=${encodeURIComponent(tp_curso)}&versio=${encodeURIComponent(vr_curso)}&…`,
use a URLSearchParams object:
body: new URLSearchParams({nom: tp_curso, versio: vr_curso, …}),
use a FormData object. This is the easiest if you have a <form> for all the input elements and each <input> has the proper name attribute (just like you'd use when natively submitting the form, without any XHR/fetch):
body: new FormData(document.getElementById('accion_form')),