Sebelum meneruskan variabel dari PHP ke JavaScript, Anda perlu memahami aliran peristiwa saat meminta halaman PHP
PHP adalah bahasa sisi server. Pertama, PHP akan mengeksekusi file ________22______ Anda untuk menghasilkan HTML
Setelah PHP memproses kode Anda, itu akan dikirim ke browser klien
Setelah file disajikan ke browser, PHP tidak dapat mengakses file lagi
Karena JavaScript berjalan di browser, itu artinya JavaScript dijalankan setelah PHP
Mengetahui alur proses ini, ada tiga cara Anda dapat meneruskan variabel PHP ke JavaScript
Mari kita mulai mempelajari cara melakukan ketiga metode yang disebutkan di atas
Menggunakan gema untuk meneruskan variabel PHP ke JavaScript
Saat Anda memiliki variabel PHP pada halaman yang sama dengan kode JavaScript, Anda dapat menggunakan echo untuk meneruskan variabel dari PHP ke JavaScript secara langsung
Misalkan Anda memiliki file index.php dengan konten berikut
<?php $name = "Nathan"; ?> <h1>Passing PHP variable to JavaScript</h1> <h2 id="result"></h2> <script> const data = "<?php echo $name; ?>"; const result = document.getElementById("result"); result.innerText = data; </script>
Saat Anda menjalankan kode di atas, nilai variabel <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> _0 akan diteruskan ke variabel <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> 1 di JavaScript
Untuk menunjukkan bahwa berfungsi, nilai <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> _1 kemudian ditetapkan sebagai konten tag <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> 3. Browser membuat output berikut
Variabel gema PHP dalam JavaScript
Dengan fungsi echo, Anda dapat menampilkan string dengan menambahkan simbol kutipan (tunggal atau ganda) sebelum tag <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> 5 di atas
Jika Anda mengirimkan nilai <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> _6, Anda tidak memerlukan simbol kutipan
<?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> _
Saat Anda mengirim array PHP, Anda perlu memanggil fungsi <?php // 👇 sending a string $name = "Nathan"; ?> <script> const data = "<?php echo $name; ?>"; </script> <?php // 👇 sending an int $age = 29; ?> <script> const data = <?php echo $age; ?>; </script> 7 sebelum meneruskannya ke JavaScript
<?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> _
Dan begitulah cara Anda meneruskan variabel PHP ke JavaScript dengan memanggil fungsi echo
Selanjutnya, mari kita lihat cara menggunakan DOM untuk meneruskan variabel PHP ke JavaScript
Menggunakan DOM untuk meneruskan variabel PHP ke JavaScript
Terkadang, Anda mungkin memerlukan variabel PHP setelah pengguna melakukan tindakan seperti mengklik tombol
Anda mungkin juga memiliki banyak variabel PHP yang ingin Anda berikan, dan sementara echo berfungsi untuk mengirim data PHP ke JavaScript, Anda mungkin menginginkan solusi yang lebih bersih
Selain memanggil fungsi echo_, Anda juga dapat menggunakan tag HTML DOM untuk menyimpan data PHP
Ini sebuah contoh
<div id="data-name" style="display: none;"> <?php $name = "Nathan"; // this is where you get the data echo htmlspecialchars($name); // put as the div content ?> </div> <div id="data-age" style="display: none;"> <?php $age = 29; // this is where you get the data echo htmlspecialchars($age); // put as the div content ?> </div> <div id="data-array" style="display: none;"> <?php $array = [1, 2, 3]; // this is where you get the data echo htmlspecialchars($array); // put as the div content ?> </div>
Dengan menyimpan data PHP Anda di tag DOM seperti yang ditunjukkan di atas, Anda kemudian dapat mengambil data menggunakan JavaScript sebagai berikut
<script> const name = document.getElementById("data-name").textContent; const age = document.getElementById("data-age").textContent; const arr = document.getElementById("data-array").textContent; </script>
Metode ini mirip dengan menggunakan echo secara langsung, tetapi dianggap lebih bersih karena Anda echo ke DOM daripada variabel JavaScript
Anda juga dapat memilih kapan JavaScript harus mengambil data PHP. Ini tidak terjadi ketika Anda echo variabel JavaScript
Menggunakan pengambilan untuk mendapatkan data PHP dari JavaScript
Saat Anda ingin memisahkan template PHP dari kode JavaScript Anda, maka Anda dapat menggunakan JavaScript Fetch API
Ambil API digunakan untuk mengirim permintaan HTTP, mirip dengan AJAX dan XMLHTTPRequest. Ini memungkinkan Anda mengambil sumber daya dari mana saja di Internet
Ambil dapat digunakan untuk mengambil data PHP menggunakan JavaScript. Misalkan Anda memiliki file PHP bernama <?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> 4 dengan konten berikut
<?php /* put your process here: * query the database * get session, etc. */ $arr = [ "name" => "Nathan", "age" => 27 ]; // 👇 when done, echo the data echo json_encode($arr);
Setelah Anda menyiapkan file PHP, buat file index.php tempat Anda akan mengambil datanya
Tambahkan tag <?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> _6 seperti yang ditunjukkan di bawah ini
<div id="result"></div> <script> // 👇 URL to your data location fetch("//localhost:8080/data.php") .then((res) => res.json()) .then((data) => { const result = document.getElementById("result"); result.textContent = JSON.stringify(data); }); </script>
Fungsi <?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> 7 akan mengirim permintaan HTTP ke file <?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> 4
Kemudian, fungsi <?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> _9 akan menguraikan respons sebagai objek JSON. Terakhir, objek JSON yang dikembalikan akan ditetapkan sebagai konten dari tag <div id="data-name" style="display: none;"> <?php $name = "Nathan"; // this is where you get the data echo htmlspecialchars($name); // put as the div content ?> </div> <div id="data-age" style="display: none;"> <?php $age = 29; // this is where you get the data echo htmlspecialchars($age); // put as the div content ?> </div> <div id="data-array" style="display: none;"> <?php $array = [1, 2, 3]; // this is where you get the data echo htmlspecialchars($array); // put as the div content ?> </div> 0 di atas
Outputnya adalah sebagai berikut
Ambil data PHP dengan mengambil
Dan begitulah cara Anda meneruskan variabel atau data PHP ke JavaScript menggunakan fungsi <?php $array = [1, 2, 3]; ?> <script> const data = <?php echo json_encode($array); ?>; </script> 7
Berbeda dengan dua metode lainnya, metode ini membuat permintaan HTTP, sehingga akan ada penundaan sebelum data diambil
Direkomendasikan untuk menggunakan Fetch API saat data PHP Anda memerlukan pemrosesan yang rumit sebelum meneruskannya ke JavaScript
Kesimpulan
Untuk meneruskan variabel dan data PHP ke JavaScript, Anda perlu membuat data dapat diakses oleh JavaScript
Anda dapat echo data langsung ke variabel JavaScript, atau Anda dapat menyimpan data di DOM sebelum mengambilnya menggunakan objek JavaScript <div id="data-name" style="display: none;"> <?php $name = "Nathan"; // this is where you get the data echo htmlspecialchars($name); // put as the div content ?> </div> <div id="data-age" style="display: none;"> <?php $age = 29; // this is where you get the data echo htmlspecialchars($age); // put as the div content ?> </div> <div id="data-array" style="display: none;"> <?php $array = [1, 2, 3]; // this is where you get the data echo htmlspecialchars($array); // put as the div content ?> </div> 3
Untuk data dengan pemrosesan yang kompleks, Anda dapat membuat file terpisah yang memproses data PHP Anda. Setiap bagian dari aplikasi Anda yang membutuhkan data dapat mengirimkan permintaan HTTP untuk mengambil data