Javascript fetch data from php

Question

I am trying to fetch values from php file

Nội dung chính Show

View This On YouTube
File Structure
HTML Setup
Setup Our PHP File
AJAX Method
Fetch API Method
Conclusion

api.php

my javascript page has code like this.(this code is not on page api.php)

            fetch('http://localhost/react_task/react-webpack-boilerplate/php/api.php', {
        method: 'get',
        // may be some code of fetching comes here
    }).then(function(response) {
            if (response.status >= 200 && response.status < 300) {
                return response.text()
            }
            throw new Error(response.statusText)
        })
        .then(function(response) {
            console.log(response);
        })

can you please guide me how to fetch value of variable from php file by using fetch.

asked Sep 9, 2016 at 14:33

Manpreet OberoiManpreet Oberoi

3473 gold badges4 silver badges11 bronze badges

3

You are not echoing the value, so it won't be send.

answered Sep 9, 2016 at 14:36

7

Your php needs to output the value you want. A simple way to do this is to use echo. For example:

echo 'come!! fetch this value';

answered Sep 9, 2016 at 14:40

RickCoxDevRickCoxDev

1651 silver badge9 bronze badges

1

You should use echo to display it in php then it will be available in you JavaScript reponse.

answered Aug 26, 2019 at 1:35

TL;DR How can I use fetch() to return data from a PHP file?

Hi all. I am having difficulty using fetch() to return data from PHP. Specifically, I have a PHP script jout.php that defines a simple array:

 'world'
];
return json_encode($sampleArray);

How can I now use fetch() to print this array to the JavaScript console log?

I've tried the JS below:

const req = async function() {
    const resp = await fetch('jout.php');
    const json = await resp.json();
    console.log(json);
}
req();

But this fails on the resp.json() line with the error, SyntaxError: Unexpected end of JSON input

In the above code JS code, if I replace the file (jout.php) with a simple JSON file jout.json containing:

{
    "hello": "world"
}

then the data from the JSON file is indeed written to the console as expected.

I realize there are other ways of using fetch(), and I will indeed learn those ways. But right now I am hoping to learn this method, since these use the tools I have readily available to me. Once I get this method working, I will continue to learn the basics of async/await with fetch. After that, I can branch out to other ways of using fetch() (aside from with a PHP file).

Thanks in advance.

Edit: Issue resolved. /u/cawcvs pointed out that my PHP file needs to echo the JSON array. So I added the line echo json_encode($sampleArray); and my issue was resolved.

In my career, I have used both AJAX and Fetch API (more recently). If you have ever had to get remote data from an API or internal PHP URL, most likely you have used one or the other.

In this tutorial, I show you how to do both methods just in case you are only familiar with one or the other. We will be using PHP to create a JSON object that grabs a list of all countries (if I missed one, I am sorry, I copied a list).

AJAX has been tried and tested for years within jQuery and at one point was the go-to method. With Vanilla JS making a considerable comeback, new options like the built-it Fetch API are used more often. This is mostly due to its ease of use and since it is built into JavaScript, you no longer need a framework or library to use it.

View This On YouTube

File Structure

/index.html
/js/init.js
/src/functions.php

For simplicity, I will be pulling from a local PHP file that returns a JSON object that can then be consumed using AJAX or Fetch. You can use this PHP file for both methods. In the init.js file, you would add your AJAX or Fetch code listed below.