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 variabelconst 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 variabelconst 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 variabelconst 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 _yudha58Related Posts :
Cara Gampang Install React Js Dengan CepatBismillaahirrohmaanirrohiim…Sudah tau React JS?React JS merupakan library j4vascript yang ketika ini sangat terkenal untuk menciptakan… Read More...
Integrasi Bootswatch Di ReactjsBismillaahirrohmaanirrohiim…Apa itu bootswatch? ia yakni template gratis untuk bootstrap, terdiri dari bermacam template gampang diinstall, … Read More...
Integrasi Bootstrap Di ReactjsBismillaahirrohmaanirrohiim…Sebagai lanjutan dari goresan pena sebelumnya wacana rujukan “penggunaan react router“, sekarang kit… Read More...
Contoh Penggunaan Component Pada React JsBismillaahirrohmaanirrohiim…Seperti yang telah kita ketahui, react js dipakai untuk menciptakan interface atau tampilan.Konsep penting… Read More...
Contoh Penggunaan React Router Di React JsBismillaahirrohmaanirrohiim…Setelah kita berhasil menginstall react JS, tentunya kita ingin mencoba menciptakan web dengan react JS ini.Dala… Read More...
0 Response to "React Js Post Data Dengan Axios Dan Fetch Ke Php"
Posting Komentar