Saya memiliki variabel dalam PHP, dan saya perlu nilainya dalam kode JavaScript saya. Bagaimana saya bisa mendapatkan variabel saya dari PHP ke JavaScript?

Saya memiliki kode yang terlihat seperti ini:

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

Saya memiliki kode JavaScript yang perlu valdan terlihat seperti:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>

Sebenarnya ada beberapa pendekatan untuk melakukan ini. Beberapa membutuhkan lebih banyak overhead daripada yang lain, dan beberapa dianggap lebih baik daripada yang lain.

Tanpa urutan tertentu:

1. Gunakan AJAX untuk mendapatkan data yang Anda butuhkan dari server.
2. Gema data ke halaman di suatu tempat, dan gunakan JavaScript untuk mendapatkan informasi dari DOM.
3. Gabungkan data langsung ke JavaScript.

Dalam posting ini, kita akan memeriksa masing-masing metode di atas, dan melihat pro dan kontra dari masing-masing, serta bagaimana menerapkannya.

1. Gunakan AJAX untuk mendapatkan data yang Anda butuhkan dari server

Metode ini dianggap yang terbaik, karena skrip sisi server dan sisi klien Anda benar-benar terpisah .

Pro

• Pemisahan yang lebih baik antara lapisan - Jika besok Anda berhenti menggunakan PHP, dan ingin pindah ke servlet, REST API, atau layanan lain, Anda tidak perlu mengubah banyak kode JavaScript.
• Lebih mudah dibaca - JavaScript adalah JavaScript, PHP adalah PHP. Tanpa mencampurkan keduanya, Anda mendapatkan kode yang lebih mudah dibaca di kedua bahasa.
• Mengizinkan transfer data tidak sinkron - Mendapatkan informasi dari PHP mungkin memakan waktu / sumber daya yang mahal. Terkadang Anda hanya tidak ingin menunggu informasi, memuat halaman, dan memiliki informasi mencapai kapan saja.
• Data tidak langsung ditemukan pada markup - Ini berarti markup Anda tetap bersih dari data tambahan apa pun, dan hanya JavaScript yang melihatnya.

Cons

• Latensi - AJAX membuat permintaan HTTP, dan permintaan HTTP dilakukan melalui jaringan dan memiliki latensi jaringan.
• Status - Data yang diambil melalui permintaan HTTP yang terpisah tidak akan menyertakan informasi dari permintaan HTTP yang mengambil dokumen HTML. Anda mungkin memerlukan informasi ini (misalnya, jika dokumen HTML dihasilkan sebagai tanggapan atas pengiriman formulir) dan, jika Anda melakukannya, Anda harus memindahkannya entah bagaimana. Jika Anda telah mengesampingkan penyertaan data di halaman (yang Anda miliki jika Anda menggunakan teknik ini) maka itu membatasi Anda untuk cookie / sesi yang mungkin tunduk pada kondisi lomba.

Contoh Implementasi

Dengan AJAX, Anda memerlukan dua halaman, satu adalah tempat PHP menghasilkan output, dan yang kedua adalah tempat JavaScript mendapatkan output:

get-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 pun halaman yang sebenarnya dinamai seperti)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

Kombinasi kedua file di atas akan mengingatkan 42ketika file selesai memuat.

Beberapa bahan bacaan lagi

• Menggunakan XMLHttpRequest - MDN
• Referensi objek XMLHttpRequest - MDN
• Bagaimana cara mengembalikan respons dari panggilan asinkron?

2. Gema data ke halaman di suatu tempat, dan gunakan JavaScript untuk mendapatkan informasi dari DOM

Metode ini kurang disukai untuk AJAX, tetapi masih memiliki kelebihan. Ini masih relatif terpisah antara PHP dan JavaScript dalam arti bahwa tidak ada PHP langsung di JavaScript.

Pro

• Cepat - Operasi DOM seringkali cepat, dan Anda dapat menyimpan dan mengakses banyak data dengan relatif cepat.

Cons

• Markup yang Berpotensi Tidak Semantik - Biasanya, yang terjadi adalah Anda menggunakan semacam <input type=hidden>untuk menyimpan informasi, karena lebih mudah untuk mendapatkan informasi inputNode.value, tetapi hal itu berarti Anda memiliki elemen yang tidak berarti dalam HTML Anda. HTML memiliki <meta>elemen untuk data tentang dokumen, dan HTML 5 memperkenalkan data-*atribut untuk data khusus untuk dibaca dengan JavaScript yang dapat dikaitkan dengan elemen tertentu.
• Dirty up the Source - Data yang dihasilkan oleh PHP dikeluarkan langsung ke sumber HTML, artinya Anda mendapatkan sumber HTML yang lebih besar dan kurang fokus.
• Sulit untuk mendapatkan data terstruktur - Data terstruktur harus HTML yang valid, jika tidak Anda harus melarikan diri dan mengonversi string sendiri.
• Pasangkan erat PHP ke logika data Anda - Karena PHP digunakan dalam presentasi, Anda tidak dapat memisahkan keduanya dengan bersih.

Contoh Implementasi

Dengan ini, idenya adalah untuk membuat semacam elemen yang tidak akan ditampilkan kepada pengguna, tetapi terlihat 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. Gabungkan data langsung ke JavaScript

Ini mungkin yang paling mudah dimengerti.

Pro

• Sangat mudah diimplementasikan - Dibutuhkan sangat sedikit untuk mengimplementasikan ini, dan mengerti.
• Tidak kotor sumber - Variabel dikeluarkan langsung ke JavaScript, sehingga DOM tidak terpengaruh.

Cons

• Pasangkan erat PHP ke logika data Anda - Karena PHP digunakan dalam presentasi, Anda tidak dapat memisahkan keduanya dengan bersih.

Contoh Implementasi

Implementasinya relatif mudah:

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

Semoga berhasil!

Saya akan mencoba jawaban yang lebih sederhana:

Penjelasan masalah

Pertama, mari kita memahami aliran acara ketika halaman disajikan dari server kami:

• PHP pertama dijalankan, menghasilkan HTML yang disajikan ke klien.
• Kemudian, HTML dikirim ke klien, setelah PHP selesai dengan itu, saya ingin menekankan bahwa begitu kode meninggalkan server - PHP selesai dengan itu dan tidak bisa lagi mengaksesnya.
• Kemudian, HTML dengan JavaScript menjangkau klien, yang dapat mengeksekusi JavaScript pada HTML itu.

Jadi sungguh, hal inti yang perlu diingat di sini adalah HTTP tidak memiliki kewarganegaraan . Setelah permintaan meninggalkan server, server tidak dapat menyentuhnya. Jadi, itu meninggalkan opsi kami untuk:

1. Kirim lebih banyak permintaan dari klien setelah permintaan awal selesai.
2. Encode apa yang dikatakan server dalam permintaan awal.

Solusi

Itulah pertanyaan inti yang harus Anda tanyakan pada diri sendiri adalah:

Apakah saya menulis situs web atau aplikasi?

Situs web umumnya berbasis halaman, dan waktu pemuatan halaman harus secepat mungkin (misalnya - Wikipedia). Aplikasi web lebih berat AJAX dan melakukan banyak perjalanan bolak-balik untuk mendapatkan informasi cepat klien (misalnya - dashboard stok).

Situs web

Mengirim lebih banyak permintaan dari klien setelah permintaan awal selesai lambat karena memerlukan lebih banyak permintaan HTTP yang memiliki overhead signifikan. Selain itu, ini membutuhkan asinkronitas karena membuat permintaan AJAX membutuhkan penangan ketika itu selesai.

Saya tidak akan merekomendasikan membuat permintaan lain kecuali situs Anda adalah aplikasi untuk mendapatkan informasi itu dari server.

Anda ingin waktu respons cepat yang memiliki dampak besar pada konversi dan waktu pemuatan. Membuat permintaan Ajax lambat untuk uptime awal dalam kasus ini dan tidak dibutuhkan.

Anda memiliki dua cara untuk mengatasi masalah ini

• Menetapkan cookie - cookie adalah header yang dikirim dalam permintaan HTTP yang dapat dibaca oleh server dan klien.
• Encode variabel sebagai JSON - JSON terlihat sangat dekat dengan objek JavaScript dan sebagian besar objek JSON adalah variabel JavaScript yang valid.

Mengatur cookie benar-benar tidak terlalu sulit, Anda hanya memberikan nilai:

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

Kemudian, Anda dapat membacanya dengan JavaScript menggunakan document.cookie:

Berikut ini adalah pengurai gulung tangan pendek, tetapi jawaban yang saya tautkan tepat di atas ini memiliki yang lebih teruji:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

Cookie bagus untuk sedikit data. Inilah yang sering dilakukan layanan pelacakan.

Setelah kami memiliki lebih banyak data, kami dapat menyandikannya dengan JSON di dalam variabel JavaScript:

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

Dengan asumsi $valueini json_encodedapat di sisi PHP (biasanya). Teknik ini adalah apa yang dilakukan Stack Overflow dengan chat-nya misalnya (hanya menggunakan .NET, bukan PHP).

Aplikasi

Jika Anda sedang menulis aplikasi - tiba-tiba waktu buka awal tidak selalu sepenting kinerja aplikasi yang sedang berlangsung, dan mulai terbayar untuk memuat data dan kode secara terpisah.

Jawaban saya di sini menjelaskan cara memuat data menggunakan AJAX dalam JavaScript:

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

Atau dengan jQuery:

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

Sekarang, server hanya perlu memuat /your/urlrute / file yang berisi kode yang mengambil data dan melakukan sesuatu dengannya, dalam kasus Anda:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

Dengan cara ini, file JavaScript kami meminta data dan menunjukkannya alih-alih meminta kode atau tata letak. Ini lebih bersih dan mulai terbayar ketika aplikasi semakin tinggi. Ini juga pemisahan yang lebih baik dari kekhawatiran dan memungkinkan pengujian kode sisi klien tanpa melibatkan teknologi sisi server yang merupakan nilai tambah lainnya.

Postscript: Anda harus sangat menyadari vektor serangan XSS ketika Anda menyuntikkan sesuatu dari PHP ke JavaScript. Ini sangat sulit untuk melarikan diri nilai-nilai benar dan itu konteks sensitif. Jika Anda tidak yakin bagaimana cara menangani XSS, atau tidak menyadarinya - baca artikel OWASP ini , yang ini dan pertanyaan ini .

Saya biasanya menggunakan atribut data- * dalam HTML.

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

</div>

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

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

Contoh ini menggunakan jQuery, tetapi dapat diadaptasi untuk perpustakaan lain atau JavaScript vanilla.

Anda dapat membaca lebih lanjut tentang properti dataset di sini: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode () membutuhkan:

• PHP 5.2.0 atau lebih
• $PHPVar dikodekan sebagai UTF-8, Unicode.

Cukup gunakan salah satu metode berikut.

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

ATAU

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>

Saya sangat menyukai cara WordPress bekerja dengan fungsi enqueue dan pelokalannya , sehingga mengikuti model itu, saya menulis kelas sederhana untuk meletakkan skrip ke halaman sesuai dengan dependensi skrip, dan untuk membuat data tambahan tersedia untuk skrip.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

Panggilan ke enqueue_script()fungsi adalah untuk menambahkan skrip, mengatur sumber dan dependensi pada skrip lain, dan data tambahan yang diperlukan untuk skrip.

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

Dan, print_scripts()metode contoh di atas akan mengirimkan hasil ini:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

Terlepas dari kenyataan bahwa skrip 'jquery' enqueued setelah 'jquery-ui', itu dicetak sebelumnya karena didefinisikan dalam 'jquery-ui' bahwa itu tergantung pada 'jquery'. Data tambahan untuk 'skrip khusus' ada di dalam blok skrip baru dan ditempatkan di depannya, berisi mydataobjek yang menyimpan data tambahan, sekarang tersedia untuk 'skrip khusus'.

Coba ini:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

-

-Setelah mencoba ini sebentar

Meskipun berfungsi, namun memperlambat kinerja. Karena PHP adalah skrip sisi server sedangkan JavaScript adalah sisi pengguna.

myPlugin.start($val); // Tried this, didn't work

Ini tidak berfungsi karena $valtidak ditentukan sejauh menyangkut JavaScript, yaitu kode PHP tidak menghasilkan apa-apa untuk $val. Coba lihat sumbernya di browser Anda dan inilah yang akan Anda lihat:

myPlugin.start(); // I tried this, and it didn't work

Dan

<?php myPlugin.start($val); ?> // This didn't work either

Ini tidak berfungsi karena PHP akan mencoba memperlakukan myPluginsebagai konstanta dan ketika gagal, PHP akan mencoba memperlakukannya sebagai string 'myPlugin'yang akan disatukan dengan output dari fungsi PHP start()dan karena itu tidak terdefinisi akan menghasilkan fatal kesalahan.

Dan

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

Meskipun ini kemungkinan besar berhasil, karena kode PHP menghasilkan JavaScript yang valid dengan argumen yang diharapkan, jika gagal, kemungkinan besar karena myPluginbelum siap. Periksa urutan eksekusi Anda.

Anda juga harus mencatat bahwa output kode PHP tidak aman dan harus difilter json_encode().

EDIT

Karena saya tidak melihat tanda kurung yang hilang di myPlugin.start(<?=$val?>: - \

Seperti yang ditunjukkan oleh @Second Rikudo, agar dapat berfungsi dengan benar $valharus mengandung tanda kurung penutup, misalnya:$val="42);"

Berarti PHP sekarang akan menghasilkan myPlugin.start(42);dan akan berfungsi seperti yang diharapkan ketika dieksekusi oleh kode JavaScript.

Saya telah keluar dengan metode yang mudah untuk menetapkan variabel JavaScript menggunakan PHP.

Ia menggunakan atribut data HTML5 untuk menyimpan variabel PHP dan kemudian ditugaskan ke JavaScript pada pemuatan halaman.

Tutorial lengkap dapat ditemukan di sini .

Contoh:

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

Ini adalah kode JavaScript

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

1. Konversi data menjadi JSON
2. Panggil AJAX untuk menerima file JSON
3. Ubah JSON menjadi objek Javascript

Contoh:

LANGKAH 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

LANGKAH 2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

Inilah yang saya tidak melihat diposting sebagai opsi. Ini mirip dengan menggunakan Ajax, tetapi jelas berbeda.

Pertama, atur sumber skrip langsung ke file PHP.

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

Anda bahkan dapat mengirimkan variabel kembali ke file PHP seperti contoh ini:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

Lalu di "your_php_file.php":

<?php
    // THIS IS A SIMPLE EXAMPLE
    // it demonstrates one method of using the src attribute to link
    // to a PHP file which can generate JavaScript code dynamically
    // and share data between PHP and JavaScript
    // you may take this learning example and develop it further
    // relying on your own coding skills for validating data
    // and avoiding errors, of course
    header('content-type: text/javascript');

    // If you pass a $_GET variable from the JavaScript
    // you should add code to validate your $_GET variable(s)

    // You can add code to query a database
    // using $_GET['var1'] or some other criteria

    // You can add simple variable assignments
    $value = 'some value';

    // For the OP's needs (assumes the class object has been defined)
    $val = $myService->getValue();
?>

function name() {
    // Pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both PHP and JavaScript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = <?php echo '"' . $val . '"'; ?>;
    var example2 = <?php echo '"' . $value . '"'; ?>;
    var example3 = <?php echo '"some other data"'; ?>;
    alert( example1 + ' / ' + example2 );
}

<?php
    // You may even want to include additional files (.php or .js, etc.)
    @include 'local_path_to_some_other_js_file.js';
    @include 'local_path_to_some_other_php_file.php';

    exit;
?>

Ini dia triknya:

1. Inilah 'PHP' Anda untuk menggunakan variabel itu:

   <?php
       $name = 'PHP variable';
       echo '<script>';
       echo 'var name = ' . json_encode($name) . ';';
       echo '</script>';
   ?>

2. Sekarang Anda memiliki variabel JavaScript yang disebut 'name', dan ini kode JavaScript Anda untuk menggunakan variabel itu:

   <script>
        console.log("I am everywhere " + name);
   </script>

Katakanlah variabel Anda selalu bilangan bulat. Dalam hal ini lebih mudah:

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Keluaran :

<script>var number = 4;alert(number);</script>

Katakanlah variabel Anda bukan bilangan bulat, tetapi jika Anda mencoba metode di atas Anda akan mendapatkan sesuatu seperti ini:

<script>var number = abcd;alert(number);</script>

Namun dalam JavaScript ini adalah kesalahan sintaksis.

Jadi dalam PHP kita memiliki pemanggilan fungsi json_encodeyang menyandikan string ke objek JSON.

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Karena abcddi JSON adalah "abcd", sepertinya ini:

<script>var number = "abcd";alert(number);</script>

Anda dapat menggunakan metode yang sama untuk array:

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

Dan kode JavaScript Anda terlihat seperti ini:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

Output konsol

Setelah banyak penelitian, saya menemukan metode termudah adalah dengan lulus semua jenis variabel dengan mudah.

Di skrip server, Anda memiliki dua variabel, dan Anda mencoba mengirimkannya ke skrip klien:

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

Di salah satu kode JavaScript Anda yang disebut pada halaman, cukup panggil variabel-variabel itu.

Saya akan menganggap bahwa data yang akan dikirim adalah string.

Seperti yang dinyatakan oleh komentator lain, AJAX adalah salah satu solusi yang mungkin, tetapi kontra lebih besar daripada pro: ia memiliki latensi dan lebih sulit untuk diprogram (perlu kode untuk mengambil nilai baik sisi server dan klien), ketika lebih sederhana fungsi melarikan diri harus cukup.

Jadi, kita kembali ke pelarian. json_encode($string)berfungsi jika Anda menyandikan string sumber sebagai UTF-8 terlebih dahulu jika belum, karena json_encodemembutuhkan data UTF-8. Jika string ada di ISO-8859-1 maka Anda cukup menggunakan json_encode(utf8_encode($string)); jika tidak, Anda selalu dapat menggunakan iconvuntuk melakukan konversi terlebih dahulu.

Tapi ada gotcha besar. Jika Anda menggunakannya dalam acara, Anda harus menjalankan htmlspecialchars()hasilnya untuk membuatnya menjadi kode yang benar. Dan kemudian Anda harus berhati-hati menggunakan tanda kutip ganda untuk melampirkan acara tersebut, atau selalu menambahkan ENT_QUOTESke htmlspecialchars. Sebagai contoh:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

Namun, Anda tidak dapat menggunakan htmlspecialcharskode JavaScript biasa (kode terlampir pada <script>... </script>tag). Itu membuat penggunaan fungsi ini rentan terhadap kesalahan, dengan melupakan htmlspecialcharshasilnya saat menulis kode acara.

Dimungkinkan untuk menulis fungsi yang tidak memiliki masalah itu, dan dapat digunakan baik dalam acara dan dalam kode JavaScript biasa, selama Anda menyertakan acara Anda selalu dalam tanda kutip tunggal, atau selalu dalam tanda kutip ganda. Inilah proposal saya, yang mensyaratkan mereka menggunakan tanda kutip ganda (yang saya sukai):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

Fungsi ini membutuhkan PHP 5.4+. Contoh penggunaan:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

Sesuai kode Anda

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

Sekarang Anda bisa mendapatkan nilai menggunakan DOM, gunakan innerHTML dari span id, dalam hal ini Anda tidak perlu melakukan panggilan ke server, atau Ajax atau hal lain.

Halaman Anda akan mencetaknya menggunakan PHP, dan Anda JavaScript akan mendapatkan nilai menggunakan DOM.

<?php

    $val = $myService->getValue(); // Makes an API and database call

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (yourexternal.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

KELUARAN

Warna apel kuning, warna stroberi merah dan warna kiwi hijau.

Bagi mereka yang memiliki masalah menggunakan kode di bawah ini dan itu terus muncul <?php echo $username?> atau sesuatu seperti ini, pergi mengedit httpd.conf di bagian mime_module dengan menambahkan ini 'AddType application / x-httpd-php .html .htm' karena mungkin dinonaktifkan secara default.

<?php
    $username = 1;
?>

<script type="text/javascript">
    var myData = <?php echo $username ?>;
    console.log(myData);
    alert(myData);
</script>

Menggunakan:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

dan itu akan berhasil. Itu hanya menetapkan variabel JavaScript dan kemudian meneruskan nilai variabel PHP yang ada. Karena PHP menulis garis JavaScript di sini, ia memiliki nilai variabel PHP dan dapat meneruskannya langsung.