Fetch POST from JS and read response from PHP

Question

I'm collecting data in a form and calling this js:

fetch('process.php', {
    method: 'POST',
    body: formData,
}).then(response => alert( response ) );

process.php gets called correctly; i perform my ops and then i try to return a confirmation message, or a failure message like this:

 echo json_encode('Upload completato correttamente');

But i can't get the message to show in the alert: i only get "[object promise]" and playing around with the response i can't seem to read the message.

Any help?

Does this answer your question? [fetch function return Promise ](https://stackoverflow.com/questions/54656223/fetch-function-return-promise-pending) — Krzysztof Krzeszewski, Mar 18 '20 at 12:27
What's the point of `json_encode` if you're just intending to return a plain string? Don't bother with JSON, just return it as text. — ADyson, Mar 18 '20 at 12:32
@ADyson if i return plain text, the alert says "[object Response]" — Mauro Sampietro, Mar 18 '20 at 12:36
Oh boy, there’s still people who use `alert` as a debugging tool these days? Log this stuff to console, then you can inspect it there and see what _kind_ of object it actually is. — CBroe, Mar 18 '20 at 12:39
@MauroSampietro because it _is_ an object, not just text. The response to a HTTP request is not just the body text alone. https://developer.mozilla.org/en-US/docs/Web/API/Response — ADyson, Mar 18 '20 at 12:40
I want to keep things as simple as possible to get a quick answer. I know the resturn object it's not just the plain text. But how to get to payload message? — Mauro Sampietro, Mar 18 '20 at 12:44
Assuming you changed `echo json_encode('Upload completato correttamente');` to `echo 'Upload completato correttamente';` in the PHP, then `fetch('process.php', { method: 'POST', body: formData }).then(response => response.text() ).then(result=>{ alert(result); });` should do it. There are lots of examples of this kind of thing online. Here's a simple demo (using a different endpoint, but the principle is the same: https://jsfiddle.net/1r79evup/) — ADyson, Mar 18 '20 at 12:46
thanks, problem solved thanks to all of the advises console etc. — Mauro Sampietro, Mar 18 '20 at 12:55

score 1 · Answer 1 · answered Mar 18 '20 at 12:29

1

you need to parsing your result like this

fetch('process.php', {
    method: 'POST',
    body: formData,
}).then(response => response.json() ).then(result=>{
 alert(result);
});

hope this work

answered Mar 18 '20 at 12:29

JuNas

432
2
7
16

If i try this, reach response.json() is not even called – Mauro Sampietro Mar 18 '20 at 12:33
1

in your browser, right click on your browser and open network tab, and then reload your page, you'll see your fetch request, select that request, in the right side, open response tab, you'll see your response. make sure you get response what you want – JuNas Mar 18 '20 at 12:44
or just console.log() that result, and see what result you get – JuNas Mar 18 '20 at 12:47
I get a ReadableStream i don't know how to read :( – Mauro Sampietro Mar 18 '20 at 12:48
please add sreenshot of your console.log result – JuNas Mar 18 '20 at 12:49
thanks, problem solved thanks to all of the advises console etc. – Mauro Sampietro Mar 18 '20 at 12:55

score 1 · Accepted Answer · answered Mar 18 '20 at 12:58

There was a problem in the php code i could spot via console. It was preventing the following correct code to work correctly:

fetch('process.php', { method: 'POST', body: formData })
  .then(response => response.text() )
  .then(result=>{ alert(result); });

Thank you all

Fetch POST from JS and read response from PHP

2 Answers2