it-swarm.asia

Cara mengembalikan variabel dan data dari PHP ke JavaScript?

Saya memiliki variabel dalam PHP, dan saya perlu nilainya dalam kode JavaScript. 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 db call
?>

Saya memiliki kode JavaScript yang perlu val dan terlihat seperti:

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

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 async - Mendapatkan informasi dari PHP mungkin waktu/sumber daya mahal. Terkadang Anda hanya tidak ingin menunggu informasi, memuat halaman, dan memiliki informasi mencapai kapan saja.
  • Data tidak ditemukan secara langsung di markup - Ini berarti markup Anda tetap bersih dari data tambahan apa pun, dan hanya JavaScript yang melihatnya.

Cons

  • Latency - AJAX membuat permintaan HTTP, dan permintaan HTTP dilakukan 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 (mis. 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 perlu dua halaman, satu di mana PHP menghasilkan output, dan yang kedua adalah di mana 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 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 42 ketika file selesai dimuat.

Beberapa bahan bacaan lagi

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

Metode ini kurang disukai daripada AJAX, tetapi masih memiliki kelebihan. Masih relatif dipisahkan antara PHP dan JavaScript dalam arti bahwa tidak ada PHP secara langsung dalam JavaScript.

Pro

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

Cons

  • Markup yang berpotensi tidakemoral - Biasanya, yang terjadi adalah Anda menggunakan semacam <input type=hidden> untuk menyimpan informasi, karena lebih mudah untuk mendapatkan informasi dari inputNode.value, tetapi dengan melakukan itu berarti Anda memiliki elemen yang tidak berarti di dalam HTML. HTML memiliki elemen <meta> untuk data tentang dokumen, dan HTML 5 memperkenalkan atribut data-* untuk data khusus untuk membaca dengan JS yang dapat dikaitkan dengan elemen tertentu.
  • Mengarahkan Sumber - Data yang dihasilkan PHP langsung dihasilkan ke sumber HTML, artinya Anda mendapatkan sumber HTML yang lebih besar dan kurang fokus.
  • Lebih sulit untuk mendapatkan data terstruktur - Data terstruktur harus HTML yang valid, jika tidak Anda harus melarikan diri dan mengonversi string sendiri.
  • Pasangan yang ketat 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. Gabungkan data langsung ke JavaScript

Ini mungkin yang termudah untuk dipahami, dan yang paling mengerikan untuk digunakan. Jangan lakukan ini kecuali Anda tahu apa yang Anda lakukan.

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

  • Tidak Aman- PHP tidak memiliki fungsi pelarian JavaScript yang sepele, dan mereka tidak mudah untuk diterapkan. Terutama ketika menggunakan input pengguna, Anda sangat rentan terhadap injeksi tingkat kedua. Disengketakan lihat komentar
  • Pasangan yang ketat PHP ke logika data Anda - Karena PHP digunakan dalam presentasi, Anda tidak dapat memisahkan keduanya dengan rapi.
  • Data terstruktur sulit - Anda mungkin dapat melakukan JSON ... agak. Tetapi XML dan HTML akan membutuhkan perhatian khusus.

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!

813
Madara Uchiha

Saya akan mencoba jawaban yang lebih sederhana:

Penjelasan masalah

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

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

Jadi sungguh, hal inti yang perlu diingat di sini adalah bahwa HTTP adalah stateless . 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 banyak AJAX berat dan melakukan banyak perjalanan bolak-balik untuk mendapatkan informasi cepat klien (misalnya - dasbor stok).

Situs web

Mengirim lebih banyak permintaan dari klien setelah permintaan awal selesai adalah lambat karena membutuhkan lebih banyak permintaan HTTP yang memiliki overhead signifikan. Selain itu, itu membutuhkan asinkron) sebagai membuat permintaan AJAX membutuhkan penangan ketika selesai.

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

Anda menginginkan waktu respons cepat yang berdampak besar pada konversi dan waktu muat. Membuat permintaan ajax lambat untuk waktu aktif awal dalam kasus ini dan tidak diperlukan.

Anda memiliki dua cara untuk mengatasi masalah ini

  • Tetapkan 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 kebanyakan objek JSON adalah variabel JavaScript yang valid.

Mengatur cookie benar-benar tidak terlalu sulit, Anda cukup 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 adalah pengurai gulung tangan pendek, tetapi jawaban yang saya tautkan tepat di atas ini lebih baik diuji:

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 JS sebagai gantinya:

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

Dengan asumsi $value adalah json_encodeable di sisi PHP (biasanya demikian). Teknik ini adalah apa yang dilakukan StackOverflow 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 rute/file /your/url yang berisi kode yang mengambil data dan melakukan sesuatu dengannya, dalam kasus Anda:

<$php
 ...
 $val = myService->getValue(); // makes an api and db call
 echo json_encode($val); // write it to the output
 $>

Dengan cara ini, file JS kami meminta data dan menunjukkannya daripada 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 apa pun dari PHP ke JavaScript. Itu sangat sulit untuk keluar dari nilai dengan benar dan itu sensitif terhadap konteks. Jika Anda tidak yakin bagaimana cara menangani XSS, atau tidak menyadarinya - baca artikel OWASP ini , yang ini dan pertanyaan ini .

84

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

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

Contoh ini menggunakan jQuery tetapi dapat disesuaikan untuk pustaka lain atau Vanilla Javascript.

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

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

json_encode () membutuhkan:

  • PHP 5.2.0 atau lebih
  • $PHPVar disandikan sebagai UTF-8, Unicode.
36
Jessé Catrinck

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

coba ini

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

-

-Setelah mencoba ini sebentar Meskipun berfungsi, namun memperlambat kinerja. sebagai php adalah skrip sisi server sedangkan javascript adalah sisi pengguna.

9
Yosra Nagati

Saya sangat menyukai cara Wordpress bekerja dengan enqueue dan localize fungsinya, jadi 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;
        }
    }
}

Fungsi panggilan ke enqueue_script() 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, metode print_scripts() dari contoh di atas akan mengirimkan output 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 sebelum karena didefinisikan dalam 'jquery-ui' yang bergantung pada 'jquery'. Data tambahan untuk 'skrip khusus' ada di dalam blok skrip baru dan diletakkan di depannya, berisi objek mydata yang menyimpan data tambahan, sekarang tersedia untuk 'skrip khusus'.

9
Danijel
myPlugin.start($val); // tried this, didn't work    

Tidak berfungsi karena $val tidak terdefinisi sejauh menyangkut javascript, yaitu. php tidak menghasilkan apapun untuk $val. Coba lihat sumbernya di browser Anda dan inilah yang akan Anda lihat:

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

Dan

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

Ini tidak berfungsi karena php akan mencoba memperlakukan myPlugin sebagai konstanta dan ketika gagal ia akan mencoba memperlakukannya sebagai string 'myPlugin' yang akan dicoba disatukan dengan output dari fungsi php start() dan karena itu tidak terdefinisi maka menghasilkan kesalahan fatal

Dan

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

Meskipun ini kemungkinan besar akan berhasil, karena php menghasilkan javascript yang valid dengan argumen yang diharapkan, jika gagal, kemungkinannya adalah karena myPlugin belum siap. Periksa urutan eksekusi Anda.

Anda juga harus mencatat bahwa put out php tidak aman dan harus difilter dengan json_encode()

EDIT

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

Seperti yang ditunjukkan oleh @Kedua Rikudo, agar bisa berfungsi dengan benar $val perlu mengandung tanda kurung tutup misalnya: $val="42);"

Berarti php sekarang akan menghasilkan myPlugin.start(42); dan akan berfungsi seperti yang diharapkan ketika dieksekusi oleh javascript

7
andrew

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

Miliknya adalah kode JS

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");
}
5
qnimate
  1. Ubah data menjadiJSON
  2. PanggilAJAXuntuk menerimaJSONfile
  3. KonversiJSONke Javascript objek

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);
      }
   }
}
3
DeV

di sini adalah salah satu yang saya tidak melihat diposting sebagai opsi. itu 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 meneruskan 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 javascripts 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;
?>
3
aequalsb

Ini dia triknya:

  1. inilah 'PHP' untuk menggunakan variabel itu:

    <?php 
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
    
  2. Sekarang Anda memiliki variabel JS yang disebut 'name', dan ini adalah 'Javascript' untuk menggunakan variabel itu:

    <script>
         console.log("i am everywhere " + name);
    </script>
    
3
Ramin Taghizada

Setelah banyak penelitian, saya menemukan metode termudah untuk 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 sembarang javascript yang disebut di laman, cukup panggil variabel-variabel itu.

2
Jonathan199

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

?>

output :

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

tetapi dalam javascript ini adalah kesalahan sintaksis.

jadi di php kita memiliki panggilan fungsi json_encode yang menyandikan string ke objek json.

<?PHP
$number = 'abcd';

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

?>

karena abcd di json itu "abcd", jadi 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 javascript Anda terlihat seperti ini:

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

output konsol

 enter image description here

1
Supun Praneeth

Saya akan menganggap bahwa data yang akan dikirim adalah string.

Seperti komentator lain katakan, 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 server- dan klien sisi), ketika fungsi melarikan diri yang lebih sederhana sudah cukup.

Jadi, kita kembali ke pelarian. json_encode($string) berfungsi jika Anda menyandikan string sumber sebagai UTF-8 terlebih dahulu jika belum, karena json_encode membutuhkan 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 iconv untuk melakukan konversi terlebih dahulu.

Tapi ada gotcha besar. Jika Anda menggunakannya dalam acara, Anda perlu menjalankan htmlspecialchars() pada hasil untuk membuatnya menjadi kode yang benar. Dan kemudian Anda harus berhati-hati menggunakan tanda kutip ganda untuk melampirkan acara, atau selalu menambahkan ENT_QUOTES ke 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 htmlspecialchars pada kode JS biasa (kode terlampir dalam <script>...</script> tag). Itu membuat penggunaan fungsi ini rentan terhadap kesalahan, dengan lupa htmlspecialchars hasilnya saat menulis kode acara.

Dimungkinkan untuk menulis fungsi yang tidak memiliki masalah itu, dan dapat digunakan baik dalam acara dan dalam kode JS 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>';
1
Pedro Gimeno

Sesuai kode Anda

<$php
     $val = $myService->getValue(); // makes an api and db 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 lainnya.

Halaman Anda akan mencetaknya menggunakan php, dan Anda javascript akan mendapatkan nilai menggunakan DOM.

0
Amit Shah