React Js Post Data Dengan Axios Dan Fetch Ke Php

Bismillaahirrohmaanirrohiim…

Berikut ini ialah rujukan penggunaan axios dan fetch pada react JS untuk post data ke server yang memakai file PHP.

Yang perlu diinstall untuk memakai rujukan ini adalah:

npm install axios qs

Antara axios dan fetch tentu memiliki kelebihan dan kekurangan masing-masing.

Seorang programmer bebas menentukan mana yang cocok dan terbaik sesuai kebutuhannya.

– Axios Menggunakan submit form ke PHP

Di sini seluruh input pada form pribadi didefinisikan pada variabel

const data = new FormData(e.target);

Axios

        const data = new FormData(e.target);
        data.append('addparam','addvalue');

        axios.post('http://url.com/path.php', data)
        .then(function(response) {
            //success
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        })
        .finally(function(){
            console.log('finish')
        })

PHP

$json = json_encode($_POST);

– Axios Menggunakan parameter key value ke PHP

Cara ini digunakan untuk mendefinisikan parameter satu persatu, biasanya digunakan untuk validasi, dll

penanganan dengan PHP nya juga memakai perintah

$json = file_get_contents('php://input');

Axios

        axios.post('http://url.com/path.php', {
            param1: 'value 1',
            name: this.state.name,
            age: this.state.age,
        })
        .then(function(response) {
            //success
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        })
        .finally(function(){
            console.log('finish')
        })

PHP

$json = file_get_contents('php://input');

– Axios Menggunakan parameter key value ke PHP dengan query string

Sama menyerupai cara di atas, bedanya penanganan datanya di PHP menggunakan

$json = json_encode($_POST);

Axios
        import qs from "qs";//query string

        const exp = {
            titre: this.state.user_nama,
            contenu: this.state.user_email,
            datePub:  'pub' ,
            userID: 1
          };

        axios.post('http://url.com/path.php', qs.stringify(exp))
        .then(function(response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log('err: '+error);
        })
        .finally(function(){
            console.log('sukses semua')
        })

PHP

$json = json_encode($_POST);

– Fetch Menggunakan submit form ke PHP

Di sini seluruh input pada form pribadi didefinisikan pada variabel

const data = new FormData(e.target);

Fetch

        const data = new FormData(e.target);

        fetch('http://url.com/path.php', {
            method: 'POST',
            body: data,
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (result) {
            console.log(JSON.stringify(result));
        })
        .catch (function (error) {
            console.log('Request failed', error);
        });

PHP

$json = json_encode($_POST);

– Fetch Menggunakan parameter key value ke PHP

Cara ini digunakan untuk mendefinisikan parameter satu persatu, biasanya digunakan untuk validasi, dll

penanganan dengan PHP nya sama memakai perintah

$json = json_encode($_POST);

Fetch
        import qs from "qs";//query string

        const exp = {
            titre: this.state.user_nama,
            contenu: this.state.user_email,
            datePub:  'pub' ,
            userID: 1
          };

        fetch('http://url.com/path.php', {
            method: 'POST',
            headers: {'Content-Type':'application/x-www-form-urlencoded'},
            body: qs.stringify(exp),
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (result) {
            console.log(JSON.stringify(result));
        })
        .catch (function (error) {
            console.log('Request failed', error);
        });

PHP

$json = json_encode($_POST);

– Axios form upload file ke PHP

Di sini seluruh input pada form pribadi didefinisikan pada variabel

const data = new FormData(e.target);

ada pelengkap headers kalau digunakan untuk upload file.

Axios

        const cfg = {
            headers: {
                'content-type':'multipart/form-data'
            }
        };
        axios.post('http://url.com/path.php', data, cfg)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log('err: ' + error);
            })
            .finally(function () {
                console.log('finish')
            })


PHP

$foto = isset($_FILES['foto']) ? $_FILES['foto'] : array();
$foto_name = isset($foto['name']) ? $foto['name'] : '';
if (!empty($foto_name)) {
    @move_uploaded_file($foto["tmp_name"], $foto_name);
}

$json = json_encode($_POST);

 

Demikian catatan singkat ini, biar bermanfaat.

Sumber https://rasupe.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: