Bagaimana cara meneruskan variabel javascript ke halaman php lain?

Question

Untuk sesuatu yang tampaknya sangat mudah, Anda akan berpikir bahwa informasi di luar sana akan sedikit lebih baik mengenai hal ini. Melewati variabel dari PHP ke JavaScript sebenarnya sangat mudah. Hanya ada beberapa hal yang perlu Anda ingat dan beberapa cara untuk melakukannya untuk memastikannya benar-benar berfungsi

Table of Contents Show

Gunakan AJAX untuk Meneruskan Data dari JavaScript ke PHP
Gunakan ambil API untuk mengirim permintaan HTTP
Gunakan Formulir untuk Meneruskan Data dari JavaScript ke PHP
Bagaimana cara meneruskan variabel JavaScript ke halaman lain?
Bagaimana cara menggunakan variabel JavaScript di PHP pada halaman yang sama?
Bagaimana saya bisa mendapatkan variabel dari satu halaman PHP ke halaman lainnya?
Bagaimana cara meneruskan variabel antara halaman dan sesi?

Saya menemukan bahwa memasukkan kode berikut ke bagian <head> di situs web saya adalah metode yang paling mudah

PHP

1

2

3

4

$php_variable = 'string'; // . Anda tentu saja bisa mendapatkan nilai variabel ini sesuai kebutuhan.

?>

Itu dia. Anda cukup mendefinisikan variabel PHP terlebih dahulu, lalu mengulanginya menjadi pernyataan deklarasi variabel JS dasar. Saya tahu ada banyak cara untuk mendefinisikan variabel JavaScript, tetapi inilah yang menurut saya paling berhasil. Saya bukan ahli di sini, tetapi sebagian besar yang lain sepertinya tidak sering bekerja

Beberapa hal yang perlu diingat untuk ini

1. Variabel PHP perlu didefinisikan sebelum variabel JS
2. Variabel JS perlu didefinisikan sebelum Anda benar-benar menggunakannya di mana saja. Ini tampak jelas, tetapi jika Anda melupakan fakta ini dan mencoba memasukkan deklarasi ini ke footer situs Anda dan kemudian menggunakannya di konten, Anda akan menemukan bahwa itu tidak berfungsi. Itu sebabnya saya suka meletakkan ini di bagian kepala situs web saya. Atau, jika Anda menggunakan WordPress atau CMS lain, pastikan untuk menempatkannya di header. php dari tema aktif Anda

Selain itu, Anda harus menyadari bahwa jika variabel Anda bukan string dan malahan angka, Anda ingin mendefinisikannya tanpa tanda kutip di sekitarnya, i. e

PHP

1

Perhatikan bahwa seperti yang disebutkan Sherri di komentar, jika Anda memiliki string yang lebih rumit atau string apa pun dengan tanda kutip (“) di dalamnya, ini akan rusak. Anda ingin melihat enkode json jika diperlukan. Tetapi untuk string dan variabel sederhana, ini sudah cukup

Sulit untuk salah dengan semua ini. Tentu saja ada cara yang lebih rumit untuk menggunakan ini, tetapi saya tidak akan membahasnya di sini. Beri tahu saya jika Anda memiliki masalah

Sebelum kita sampai pada jawabannya, perlu diketahui bahwa tidak mungkin untuk langsung mengirimkan variabel dari JavaScript ke PHP

Ini karena kode PHP dijalankan di server, sedangkan kode JavaScript dijalankan di browser

Pada saat kode JavaScript dieksekusi oleh browser, kode PHP sudah selesai berjalan di server

Namun, ada cara untuk mengatasi batasan ini dan meneruskan data dari JavaScript ke PHP

Artikel ini akan membantu Anda mempelajari solusi di atas

Gunakan AJAX untuk Meneruskan Data dari JavaScript ke PHP

AJAX (Asynchronous JavaScript and XML) adalah teknik pengiriman dan penerimaan data dari server secara asinkron, tanpa harus me-refresh halaman

Ini memungkinkan untuk memperbarui sebagian halaman web tanpa memuat ulang seluruh halaman. Biasanya digunakan untuk hal-hal seperti validasi formulir dan pembaruan konten dinamis

Dalam JavaScript, AJAX dilakukan dengan menggunakan objek XMLHttpRequest

Kode di bawah ini menunjukkan cara menggunakan objek XMLHttpRequest untuk mengirim data ke skrip PHP Anda

function sendData() {
    var data = {
        name: "Nathan",
        email: "[email protected]",
    };

    var xhr = new XMLHttpRequest();

    //👇 set the PHP page you want to send data to
    xhr.open("POST", "index.php", true);
    xhr.setRequestHeader("Content-Type", "application/json");

    //👇 what to do when you receive a response
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            alert(xhr.responseText);
        }
    };

    //👇 send the data
    xhr.send(JSON.stringify(data));
}

Dalam contoh ini, kami telah mendefinisikan fungsi sendData() yang berisi data yang ingin kami sampaikan ke PHP, bersama dengan XMLHttpRequest yang akan dieksekusi untuk mengirim data

Data ini direpresentasikan sebagai objek JavaScript, tetapi bisa juga berupa array atau string

Objek XMLHttpRequest_ kemudian digunakan untuk mengirim data ke file

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

1 di server menggunakan permintaan HTTP

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

2

Di file

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

_1 Anda, Anda dapat mengakses data yang dikirim dari JavaScript dengan kode berikut

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

_

Pada kode di atas, fungsi

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

_4 mengubah data yang dikodekan JSON yang dikirim dari JavaScript menjadi larik PHP

Anda kemudian dapat mengakses elemen individual dari array dan menggunakannya dalam kode PHP Anda

Ketika Anda menjalankan fungsi sendData()_, kode PHP akan dieksekusi dan respons akan diberikan seperti yang ditunjukkan di bawah ini

xhr alert() response peringatan xhr () respons

Anda dapat menjalankan fungsi sendData()_ dengan membuat elemen HTML

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

7 sebagai berikut

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

Anda dapat mengubah fungsi

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

_8 yang disebut dalam fungsi

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

9 agar sesuai dengan kebutuhan Anda

Gunakan ambil API untuk mengirim permintaan HTTP

API

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

_0 adalah alternatif modern untuk XMLHttpRequest yang dapat Anda gunakan untuk meneruskan data dari JavaScript ke PHP

Berikut adalah contoh bagaimana Anda dapat menggunakan

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

0 API untuk meneruskan data dari JavaScript ke PHP

an><button onClick="sendData()">Send Data</button> <script> function sendData() { var data = { name: "Nathan", email: "[email protected]", }; //👇 call the fetch function fetch("index.php", { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json", }, }) //👇 receive the response .then((response) => response.text()) .then((data) => alert(data)); } </script>

Kode di atas melakukan hal yang sama dengan kode XMLHttpRequest

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

_0 API adalah cara yang lebih modern dan fleksibel untuk mengirim data dari JavaScript ke PHP. Ini memiliki keuntungan tambahan karena mampu menangani permintaan asinkron

Namun, ini tidak didukung oleh semua browser, jadi Anda mungkin perlu menggunakan polyfill jika ingin mendukung browser lama

Gunakan Formulir untuk Meneruskan Data dari JavaScript ke PHP

Cara lain untuk meneruskan data dari JavaScript ke PHP adalah dengan menggunakan formulir HTML

Saat pengguna mengirimkan formulir, data dikirim ke server sebagai permintaan HTTP. Data ini dapat diakses oleh skrip PHP yang memproses pengiriman formulir

Untuk menggunakan formulir untuk meneruskan data dari JavaScript ke PHP, Anda perlu membuat formulir di halaman web Anda dan menambahkan tombol kirim

Kemudian, Anda dapat menggunakan JavaScript untuk mengisi kolom formulir dengan data yang ingin Anda berikan ke PHP, dan memicu pengiriman formulir saat pengguna mengklik tombol kirim

Perhatikan contoh di bawah ini

<form action="index.php" method="POST">
    <input type="text" name="name" value="" id="name-field" />
    <input type="email" name="email" value="" id="email-field" />
    <input type="submit" value="Submit" id="submit-button" />
</form>

<button onClick="sendData()">Send Data</button>

<script>
    function sendData() {
        //👇 create data object
        var data = {
            name: "Nathan",
            email: "[email protected]",
        };

        //👇 populate the form fields with the data
        document.getElementById("name-field").value = data.name;
        document.getElementById("email-field").value = data.email;

        //👇 submit the form
        document.getElementById("submit-button").click();
    }
</script>

Dalam contoh ini, kami telah membuat formulir HTML dengan dua bidang

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

5 tersembunyi dan tombol kirim

Atribut

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

_6 formulir menentukan skrip PHP yang akan memproses pengiriman formulir, dan atribut

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

7 menentukan bahwa data harus dikirim menggunakan permintaan HTTP

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

2

Dalam kode JavaScript, kami telah mendefinisikan fungsi

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

9 yang berisi data yang ingin kami sampaikan ke PHP

Data ini direpresentasikan sebagai objek JavaScript, tetapi bisa juga berupa array atau string

Kami kemudian menggunakan fungsi

<button onClick="sendData()">Send Data</button>
<script>
    function sendData() {
        var data = {
            name: "Nathan",
            email: "[email protected]",
        };
        //👇 call the fetch function
        fetch("index.php", {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Content-Type": "application/json",
            },
        })
            //👇 receive the response
            .then((response) => response.text())
            .then((data) => alert(data));
    }
</script>

_0 untuk mendapatkan referensi ke bidang formulir dan tombol kirim

Terakhir, kami menggunakan metode

<button onClick="sendData()">Send Data</button>
<script>
    function sendData() {
        var data = {
            name: "Nathan",
            email: "[email protected]",
        };
        //👇 call the fetch function
        fetch("index.php", {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Content-Type": "application/json",
            },
        })
            //👇 receive the response
            .then((response) => response.text())
            .then((data) => alert(data));
    }
</script>

_1 untuk memicu pengiriman formulir

Saat pengguna mengklik tombol kirim, formulir akan dikirimkan ke file

<?php
$data = json_decode(file_get_contents("php://input"), true);

echo "Hello, " . $data["name"] . "!";
echo PHP_EOL;
echo "Your email address is " . $data["email"];

1 di server, dan data akan dikirim sebagai bagian dari permintaan HTTP

Dalam skrip PHP Anda, Anda dapat mengakses data yang dikirim dari JavaScript menggunakan variabel

<button onClick="sendData()">Send Data</button>
<script>
    function sendData() {
        var data = {
            name: "Nathan",
            email: "[email protected]",
        };
        //👇 call the fetch function
        fetch("index.php", {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Content-Type": "application/json",
            },
        })
            //👇 receive the response
            .then((response) => response.text())
            .then((data) => alert(data));
    }
</script>

3, seperti yang kita lakukan pada contoh sebelumnya

Perhatikan bahwa karena pengiriman formulir akan menyegarkan halaman saat ini, Anda mungkin tidak melihat respons dari PHP

Solusi ini disarankan hanya jika Anda perlu mengirim data ke halaman yang sama

Anda kemudian dapat menulis kode yang akan menampilkan respons sebagai berikut

<form 
action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
method="POST">
<input type="text" name="name" value="" id="name-field" />
<input type="email" name="email" value="" id="email-field" />
<input type="submit" value="Submit" id="submit-button" />
</form>

<button onClick="sendData()">Send Data</button>

<?php
//👇 output response with php
if (isset($_POST["name"])) {
  echo "<p>Hello, {$_POST["name"]}!</p>";
}

if (isset($_POST["email"])) {
  echo "<p>Your email address is: {$_POST["email"]}</p>";
}
?>

<script>
function sendData() {
    var data = {
        name: "Nathan",
        email: "[email protected]",
    };

    document.getElementById("name-field").value = data.name;
    document.getElementById("email-field").value = data.email;

    document.getElementById("submit-button").click();
}
</script>

Atribut

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

_6 dari formulir di atas akan mengirimkan formulir ke halaman saat ini

Menggunakan formulir mengharuskan Anda menulis elemen HTML di halaman Anda, lalu menggunakan JavaScript untuk memanipulasi formulir

Anda dapat mengirimkan formulir menggunakan JavaScript atau melakukannya secara manual, tetapi hasilnya tidak akan ditampilkan di halaman jika Anda mengirim data ke halaman lain

Itu sebabnya solusi ini hanya efektif ketika Anda mengirim data ke halaman saat ini

Kesimpulan

Untuk meneruskan variabel atau data dari JavaScript ke PHP, Anda dapat menggunakan implementasi AJAX di JavaScript (yaitu XMLHttpRequest) atau

<button onClick="sendData()">Send Data</button>
<!-- <script> element here. -->

0 API

Bagaimana cara meneruskan variabel JavaScript ke halaman lain?

Ada dua cara untuk meneruskan variabel antar halaman web. Metode pertama adalah menggunakan sessionStorage, atau localStorage . Metode kedua adalah menggunakan string kueri dengan URL.