Bagaimana cara meneruskan variabel dan data dari PHP ke JavaScript?

Question

Saya memiliki variabel dalam PHP, dan saya membutuhkan nilainya dalam kode JavaScript saya. Bagaimana cara 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 membutuhkan valdan terlihat di sepanjang baris:

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

Answer 1

Sebenarnya ada beberapa pendekatan untuk melakukan ini. Beberapa membutuhkan lebih banyak biaya 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. Gema data langsung ke JavaScript.

Dalam posting ini, kita akan memeriksa masing-masing metode di atas, dan melihat pro dan kontra masing-masing, serta cara 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 antar lapisan - Jika besok Anda berhenti menggunakan PHP, dan ingin pindah ke servlet, REST API, atau layanan lain, Anda tidak perlu banyak mengubah kode JavaScript.
• Lebih mudah dibaca - JavaScript adalah JavaScript, PHP adalah PHP. Tanpa mencampurkan keduanya, Anda mendapatkan kode yang lebih mudah dibaca pada kedua bahasa.
• Memungkinkan untuk transfer data asynchronous - Mendapatkan informasi dari PHP mungkin memakan waktu / sumber daya yang mahal. Kadang-kadang Anda tidak ingin menunggu informasi, memuat halaman, dan mendapatkan informasi kapan pun.
• Data tidak langsung ditemukan di markup - Ini berarti markup Anda tetap bersih dari data tambahan apa pun, dan hanya JavaScript yang melihatnya.

Kontra

• Latensi - AJAX membuat permintaan HTTP, dan permintaan HTTP dibawa melalui jaringan dan memiliki latensi jaringan.
• Status - Data yang diambil melalui permintaan HTTP terpisah tidak akan menyertakan informasi apa pun dari permintaan HTTP yang mengambil dokumen HTML. Anda mungkin memerlukan informasi ini (misalnya, jika dokumen HTML dibuat sebagai tanggapan atas pengiriman formulir) dan, jika Anda membutuhkannya, harus mentransfernya. Jika Anda mengesampingkan penyematan data di halaman (yang Anda miliki jika Anda menggunakan teknik ini) maka itu membatasi Anda pada cookie / sesi yang mungkin tunduk pada ketentuan balapan.

Contoh Implementasi

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

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 nama halaman sebenarnya)

<!-- 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 memberi tahu 42saat file selesai dimuat.

Beberapa bahan bacaan lagi

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

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

Metode ini kurang disukai daripada AJAX, tetapi tetap 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 serta mengakses banyak data dengan relatif cepat.

Kontra

• Markup yang Mungkin Tidak Semantik - Biasanya, yang terjadi adalah Anda menggunakan semacam <input type=hidden>untuk menyimpan informasi, karena lebih mudah untuk mendapatkan informasi dari inputNode.value, tetapi melakukannya 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 membaca dengan JavaScript yang dapat dikaitkan dengan elemen tertentu.
• Mengotori Sumber - Data yang dihasilkan PHP dikeluarkan langsung ke sumber HTML, yang berarti Anda mendapatkan sumber HTML yang lebih besar dan kurang fokus.
• Lebih sulit mendapatkan data terstruktur - Data terstruktur harus berupa HTML yang valid, jika tidak, Anda harus keluar dan mengonversi string sendiri.
• Pasangkan erat PHP ke logika data Anda - Karena PHP digunakan dalam presentasi, Anda tidak dapat memisahkan keduanya dengan rapi.

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. Gema data langsung ke JavaScript

Ini mungkin yang paling mudah dimengerti.

Pro

• Sangat mudah diterapkan - Hanya perlu sedikit untuk menerapkan ini, dan memahami.
• Tidak mengotori sumber - Variabel dikeluarkan langsung ke JavaScript, jadi DOM tidak terpengaruh.

Kontra

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

Contoh Implementasi

Penerapannya relatif mudah:

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

Semoga berhasil!

Answer 2

Saya akan mencoba jawaban yang lebih sederhana:

Penjelasan masalah

Pertama, mari kita pahami aliran peristiwa saat halaman disajikan dari server kita:

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

Jadi sungguh, hal inti yang perlu diingat di sini adalah bahwa HTTP tidak memiliki kewarganegaraan . Setelah permintaan keluar dari server, server tidak dapat menyentuhnya. Jadi, itu menyisakan pilihan kita untuk:

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

Solusi

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

Apakah saya menulis situs web atau aplikasi?

Situs web sebagian besar berbasis halaman, dan waktu muat halaman harus secepat mungkin (misalnya - Wikipedia). Aplikasi web lebih berat AJAX dan melakukan banyak perjalanan pulang pergi untuk mendapatkan informasi cepat klien (misalnya - dasbor stok).

Situs web

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

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

Anda menginginkan waktu respons yang cepat yang berdampak besar pada konversi dan waktu muat. Dalam kasus ini, membuat permintaan Ajax lambat untuk uptime awal dan tidak diperlukan.

Anda memiliki dua cara untuk mengatasi masalah tersebut

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

Menetapkan cookie sebenarnya tidak terlalu sulit, Anda cukup menetapkan nilainya:

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:

Ini adalah pengurai gulungan 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 oleh layanan pelacakan.

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

<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 obrolannya misalnya (hanya menggunakan .NET daripada PHP).

Aplikasi

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

Jawaban saya di sini menjelaskan cara memuat data menggunakan AJAX di 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 berisi /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 kita meminta data dan menampilkannya daripada meminta kode atau tata letak. Ini lebih bersih dan mulai terbayar saat aplikasi semakin tinggi. Ini juga pemisahan masalah yang lebih baik dan memungkinkan pengujian kode sisi klien tanpa melibatkan teknologi sisi server yang merupakan nilai tambah lainnya.

Catatan tambahan: Anda harus sangat waspada terhadap vektor serangan XSS saat Anda menyuntikkan apa pun dari PHP ke JavaScript. Ini sangat sulit untuk melarikan diri nilai-nilai benar dan itu konteks sensitif. Jika Anda tidak yakin bagaimana menangani XSS, atau tidak menyadarinya - baca artikel OWASP ini , yang satu ini dan pertanyaan ini .

Answer 3

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 pustaka lain atau vanilla JavaScript.

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

Answer 4

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

json_encode () membutuhkan:

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

Answer 5

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>

Answer 6

Saya cukup seperti cara WordPress bekerja dengan nya enqueue dan localize fungsi, sehingga mengikuti model itu, saya menulis sebuah kelas sederhana untuk menempatkan script ke dalam halaman sesuai dengan dependensi skrip, dan untuk membuat data tambahan yang tersedia untuk script.

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 tersebut untuk menambahkan skrip, menyetel sumber dan ketergantungan 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 keluaran 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' diantrekan setelah 'jquery-ui', itu dicetak sebelumnya karena itu ditentukan dalam 'jquery-ui' yang bergantung pada 'jquery'. Data tambahan untuk 'custom-script' berada di dalam blok script baru dan ditempatkan di depannya, berisi mydataobjek yang menyimpan data tambahan, sekarang tersedia untuk 'custom-script'.

Answer 7

Coba ini:

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

-

-Setelah mencoba ini sebentar

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

Answer 8

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

Itu tidak berfungsi karena $valtidak ditentukan sejauh menyangkut JavaScript, yaitu kode PHP tidak mengeluarkan apa pun untuk $val. Coba lihat sumber di browser Anda dan berikut ini 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 memperlakukannya myPluginsebagai konstanta dan ketika gagal, ia akan mencoba memperlakukannya sebagai string 'myPlugin'yang akan mencoba untuk digabungkan dengan output dari fungsi PHP start()dan karena itu tidak ditentukan itu 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 itu karena myPluginbelum siap. Periksa urutan eksekusi Anda.

Anda juga harus memperhatikan bahwa keluaran 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 $valperlu mengandung tanda kurung penutup, misalnya:$val="42);"

Artinya PHP sekarang akan berproduksi myPlugin.start(42);dan akan bekerja seperti yang diharapkan ketika dijalankan oleh kode JavaScript.

Answer 9

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

Ini menggunakan atribut data HTML5 untuk menyimpan variabel PHP dan kemudian ditugaskan ke JavaScript saat 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 kode JavaScript-nya

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");
}

Answer 10

1. Ubah 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);
      }
   }
}

Answer 11

Ini salah satu yang saya tidak lihat diposting sebagai opsi. Ini mirip dengan menggunakan Ajax, tetapi jelas berbeda.

Pertama, setel sumber skrip langsung ke file PHP.

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

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

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

Kemudian 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;
?>

Answer 12

Inilah triknya:

1. Berikut adalah '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 dipanggil 'name', dan berikut adalah kode JavaScript Anda untuk menggunakan variabel itu:

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

Answer 13

Misalkan 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 di PHP kita memiliki panggilan 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 "abcd", tampilannya seperti 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>

Keluaran konsol

Answer 14

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

Di skrip server, Anda memiliki dua variabel, dan Anda mencoba mengirimnya 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 dipanggil di halaman, cukup panggil variabel tersebut.

Answer 15

Saya akan berasumsi bahwa data yang akan dikirim adalah string.

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

Jadi, kami kembali melarikan diri. json_encode($string)berfungsi jika Anda mengenkode string sumber sebagai UTF-8 terlebih dahulu jika belum, karena json_encodememerlukan data UTF-8. Jika string dalam ISO-8859-1 maka Anda dapat 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-acara, Anda harus menjalankan htmlspecialchars()hasilnya untuk membuatnya menjadi kode yang benar. Dan kemudian Anda harus berhati-hati menggunakan tanda kutip ganda untuk menyertakan acara, 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 diapit dalam tag <script>... </script>). Itu membuat penggunaan fungsi ini rentan terhadap kesalahan, dengan melupakan htmlspecialcharshasil saat menulis kode peristiwa.

Dimungkinkan untuk menulis fungsi yang tidak memiliki masalah tersebut, dan dapat digunakan baik dalam acara dan dalam kode JavaScript biasa, selama Anda selalu menyertakan acara Anda dalam tanda kutip tunggal, atau selalu dalam tanda kutip ganda. Ini adalah proposal saya, mengharuskan mereka menggunakan tanda kutip ganda (yang saya lebih suka):

<?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'";
    }

Fungsinya 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>';

Answer 16

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 yang lainnya.

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

Answer 17

<?php

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

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

?>