Bagaimana untuk menghantar pembolehubah dan data dari PHP ke JavaScript?
P粉369196603
P粉369196603 2023-08-27 12:05:35
0
2
375

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

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

    P粉502608799

    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 keranaskrip 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)

      

    Gabungan dua fail di atas akan membunyikan amaran apabila pemuatan fail selesai42.

    Banyak bahan bacaan

    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 pemisahanrelatifantara 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

       

    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:

      

    Semoga berjaya kepada anda!

      Topik popular
      Lagi>
      Artikel popular
      Tutorial Popular
      Lagi>
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!