Can't display fetch params

Question

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

My PHP is 8 years rusty, but isn't `$_POST["nom"]` supposed to read `{ "nom" : tp_curso }`? You are sending a string as body (`'nom=tp_curso&versio=vr_curso&programa=pr_curso'`) instead of an object(`{ nom : tp_curso, versio : vr_curso, programa : pr_curso }`) — Jeremy Thille, Nov 13 '21 at 21:24
No. If I send an object the result is the same. No parameters displayed. — axmug, Nov 16 '21 at 11:55

Bergi · Accepted Answer · 2021-11-13T22:31:33.463

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')),
```

Thanks for the answer. The second option that is using a URLSearchParams has worked. Neither string concatenation nor FormData has worked. — axmug, Nov 15 '21 at 15:51

Can't display fetch params

1 Answers1