Bagaimana cara mendapatkan nilai variabel javascript dalam variabel php di halaman yang sama?

Question

Sebelum meneruskan variabel dari PHP ke JavaScript, Anda perlu memahami aliran peristiwa saat meminta halaman PHP

Table of Contents Show

Menggunakan gema untuk meneruskan variabel PHP ke JavaScript
Menggunakan DOM untuk meneruskan variabel PHP ke JavaScript
Menggunakan pengambilan untuk mendapatkan data PHP dari JavaScript
Bagaimana saya bisa meneruskan variabel JavaScript ke variabel PHP di halaman yang sama?
Bagaimana cara memasukkan nilai variabel JavaScript ke dalam variabel PHP?
Bagaimana cara meneruskan nilai dari HTML ke PHP di halaman yang sama?

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

PHP echo variable in JavaScript 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("http://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

Retrieve PHP data with fetch 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

Bagaimana saya bisa meneruskan variabel JavaScript ke variabel PHP di halaman yang sama?

Cara meneruskan variabel JavaScript ke PHP adalah melalui permintaan . Jenis URL ini hanya terlihat jika kita menggunakan tindakan GET, tindakan POST menyembunyikan informasi di dalam URL. Sisi Server (PHP). Di halaman PHP sisi server, kami meminta data yang dikirimkan oleh formulir dan menampilkan hasilnya. $result = $_GET [ 'data' ];

Bagaimana cara memasukkan nilai variabel JavaScript ke dalam variabel PHP?

Cara paling ideal untuk meneruskan nilai variabel JavaScript dalam variabel PHP adalah meneruskan variabel JS ke panggilan AJAX . Tetapi untuk melakukan ini kita perlu memuat ulang halaman dengan variabel dalam parameter $_GET dan mengakses variabel dalam PHP menggunakan $_GET['a'].

Bagaimana cara meneruskan nilai dari HTML ke PHP di halaman yang sama?

Anda dapat memasukkan bagian html ke dalam String PHP dengan variabel PHP di dalamnya, dan mengulanginya, php akan secara otomatis menetapkan vars di dalamnya . Atau Anda memisahkan HTML dan PHP seperti yang terlihat di atas.

kode php