Bagaimana untuk menghantar pembolehubah dan data dari PHP ke JavaScript?

Question

Saya mempunyai pembolehubah dalam PHP dan saya memerlukan nilainya dalam kod JavaScript. Bagaimanakah cara menukar pembolehubah saya daripada PHP kepada JavaScript?

Kod saya kelihatan seperti ini:

getValue(); // Membuat panggilan API dan pangkalan data

Pada halaman yang sama saya mempunyai kod JavaScript yang perlu melepasi nilai $val

Answer 1

Saya biasanya menggunakan atribut data-* dalam HTML.

<div
    class="service-container"
    data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Var "service" now contains the value of $myService->getValue();
        });
    });
</script>

Contoh ini menggunakan jQuery, tetapi ia boleh disesuaikan dengan perpustakaan lain atau JavaScript biasa.

Anda boleh membaca lebih lanjut tentang sifat set data di sini: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 2

Sebenarnya terdapat beberapa cara untuk melakukan ini. Ada yang memerlukan lebih banyak overhed daripada yang lain, dan ada yang dianggap lebih baik daripada yang lain.

Tanpa susunan tertentu:

1. Gunakan AJAX untuk mendapatkan data yang diperlukan daripada pelayan.
2. Echo data di suatu tempat dalam halaman dan gunakan JavaScript untuk mendapatkan maklumat daripada DOM.
3. Echo data terus ke JavaScript.

Dalam artikel ini, kita akan melihat setiap kaedah di atas, memahami kebaikan dan keburukan setiap kaedah, dan cara melaksanakannya.

1. Gunakan AJAX untuk mendapatkan data yang anda perlukan daripada pelayan

Kaedah ini dianggap terbaik kerana skrip bahagian pelayan dan bahagian pelanggan anda adalah berasingan sepenuhnya.

Kelebihan

• Pemisahan yang lebih baik antara lapisan - Jika esok anda berhenti menggunakan PHP dan ingin beralih ke servlet, REST API atau perkhidmatan lain, anda tidak perlu menukar terlalu banyak kod JavaScript.
• Lebih mudah dibaca - JavaScript ialah JavaScript dan PHP ialah PHP. Tanpa mencampurkan kedua-duanya, anda mendapat lebih banyak kod yang boleh dibaca dalam kedua-dua bahasa.
• Membenarkan pemindahan data tak segerak - Mendapatkan maklumat daripada PHP boleh memakan masa/sumber. Kadang-kadang anda tidak mahu menunggu maklumat, memuatkan halaman dan memintanya tiba pada bila-bila masa.
• Data tidak boleh ditemui secara langsung pada tanda - Ini bermakna tiada data lain dalam penanda anda dan hanya JavaScript boleh melihatnya.

Keburukan

• Delay - AJAX mencipta permintaan HTTP, dan permintaan HTTP dihantar melalui rangkaian dengan kependaman rangkaian.
• Status - Data yang diambil melalui permintaan HTTP yang berasingan tidak akan mengandungi sebarang maklumat daripada permintaan HTTP yang mengambil dokumen HTML. Anda mungkin memerlukan maklumat ini (contohnya, jika dokumen HTML dijana sebagai tindak balas kepada penyerahan borang), dan jika ya, anda mesti menghantarnya entah bagaimana. Jika anda telah mengecualikan membenamkan data dalam halaman (yang anda miliki jika anda menggunakan teknologi ini), maka ini mengehadkan penggunaan kuki/sesi anda yang mungkin tertakluk pada syarat perlumbaan.

Contoh perlaksanaan

Dengan AJAX, anda memerlukan dua halaman, satu halaman di mana PHP menjana output, dan halaman kedua di mana JavaScript mendapat output itu:

Dapatkan data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to `echo` the result.
                      // All data should be `json_encode`-d.

                      // You can `json_encode` any value in PHP, arrays, strings,
                      // even objects.

index.php (atau apa sahaja nama halaman sebenar)

<!-- snip -->
<script>
    fetch("get-data.php")
        .then((response) => {
            if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
                              // check for any errors.
                // In case of an error, throw.
                throw new Error("Something went wrong!");
            }

            return response.json(); // Parse the JSON data.
        })
        .then((data) => {
             // This is where you handle what to do with the response.
             alert(data); // Will alert: 42
        })
        .catch((error) => {
             // This is where you handle errors.
        });
</script>
<!-- snip -->

Gabungan dua fail di atas akan membunyikan amaran apabila pemuatan fail selesai 42.

Banyak bahan bacaan

• Gunakan API Ambil
• Bagaimana untuk membalas respons daripada panggilan-ajax kepada panggilan tak segerak?

2. Gema data di suatu tempat pada halaman dan gunakan JavaScript untuk mendapatkan maklumat daripada DOM

Kaedah ini tidak sehebat AJAX, tetapi ia masih mempunyai kelebihannya. Masih terdapat pemisahan relatif antara PHP dan JavaScript, dalam erti kata tiada PHP langsung dalam JavaScript.

Kelebihan

• Cepat - Operasi DOM secara amnya pantas dan anda boleh menyimpan serta mengakses sejumlah besar data dengan cepat.

Keburukan

• Penanda yang berpotensi bukan semantik - Biasanya, anda akan menggunakan sejenis atribut 来存储信息，因为获取信息更容易超出 inputNode.value，但这样做意味着 HTML 中存在无意义的元素。 HTML 具有用于表示有关文档的数据的 元素，并且 HTML 5 引入了 data-* khusus untuk data yang boleh dibaca menggunakan JavaScript yang boleh dikaitkan dengan elemen tertentu.
• Kucar-kacir dengan kod sumber - Data yang dijana PHP dikeluarkan terus ke kod sumber HTML, yang bermaksud anda akan mendapat kod sumber HTML yang lebih besar dan kurang fokus.
• Lebih sukar untuk mendapatkan data berstruktur - Data berstruktur mestilah HTML yang sah, jika tidak, anda perlu melarikan diri dan menukar rentetan itu sendiri.
• Gandingkan PHP dengan logik data - Memandangkan PHP digunakan untuk pembentangan, anda tidak boleh memisahkan kedua-duanya sepenuhnya.

Contoh perlaksanaan

Dengan ini, ideanya adalah untuk mencipta beberapa jenis elemen yang tidak akan ditunjukkan kepada pengguna, tetapi boleh dilihat oleh JavaScript.

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3. Gema data terus ke JavaScript

Ini mungkin yang paling mudah difahami.

Kelebihan

• Sangat mudah untuk dilaksanakan - mengambil masa yang sangat sedikit untuk dilaksanakan dan difahami.
• Tiada pencemaran - Pembolehubah dikeluarkan terus ke JavaScript, jadi DOM tidak terjejas.

Keburukan

• Gandingkan PHP dengan logik data - Memandangkan PHP digunakan untuk pembentangan, anda tidak boleh memisahkan kedua-duanya sepenuhnya.

Contoh perlaksanaan

Pelaksanaannya agak mudah:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

Semoga berjaya kepada anda!