Cara menghantar pembolehubah dan data PHP ke JavaScript
P粉004287665
2023-08-21 12:31:08
<p>Saya mempunyai pembolehubah dalam PHP dan saya perlu menggunakan nilainya dalam kod JavaScript saya. Bagaimanakah saya boleh menghantar pembolehubah saya dari PHP ke dalam JavaScript? </p>
<p>Saya mempunyai kod berikut: </p>
<pre class="brush:php;toolbar:false;"><?php
$val = $myService->getValue(); // Buat panggilan API dan pangkalan data
</pra>
<p>Pada halaman yang sama, saya mempunyai kod JavaScript yang perlu menghantar nilai pembolehubah <kod>$val</code>
<pre class="brush:js;toolbar:false;"><script>
myPlugin.start($val); // Saya mencuba ini tetapi ia tidak berjaya
<?php myPlugin.start($val);
myPlugin.start(<?=$val?>); // Ini kadangkala berfungsi, tetapi kadangkala gagal
</skrip>
</pra>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 asli.
Anda boleh membaca lebih lanjut tentang sifat set data di sini: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
Sebenarnya terdapat beberapa cara untuk melakukan ini. Sesetengah kaedah memerlukan lebih banyak overhed, dan sesetengahnya dianggap lebih baik daripada yang lain.
Tanpa susunan tertentu:
Dalam artikel ini, kami akan memperincikan kebaikan dan keburukan setiap kaedah di atas, dan cara melaksanakannya.
1 Gunakan AJAX untuk mendapatkan data yang diperlukan daripada pelayan
Pendekatan ini dianggap terbaik kerana skrip bahagian pelayan dan bahagian klien dipisahkan sepenuhnya.
Kelebihan
Keburukan
Contoh perlaksanaan
Dengan AJAX, anda memerlukan dua halaman, satu di mana PHP menjana output, dan satu lagi di mana JavaScript mendapat output itu:
dapatkan-data.php
/* 在这里执行一些操作，比如与数据库、文件会话等进行交互 * 超越世界，无间地带，闪烁之城和加拿大。 * * AJAX通常使用字符串，但你也可以输出JSON、HTML和XML。 * 这完全取决于你发送的AJAX请求的Content-type头。 */ echo json_encode(42); // 最后，你需要`echo`结果。 // 所有数据都应该使用`json_encode`。 // 你可以在PHP中`json_encode`任何值，数组、字符串， // 甚至对象。index.php (atau nama halaman sebenar)
<!-- 省略 --> <script> fetch("get-data.php") .then((response) => { if(!response.ok){ // 在解析（即解码）JSON数据之前， // 检查是否有任何错误。 // 如果有错误，抛出错误。 throw new Error("Something went wrong!"); } return response.json(); // 解析JSON数据。 }) .then((data) => { // 在这里处理响应。 alert(data); // 将弹出：42 }) .catch((error) => { // 在这里处理错误。 }); </script> <!-- 省略 -->Gabungan dua fail di atas akan muncul apabila pemuatan fail selesai
42.Banyak bacaan
2 Gema data ke lokasi tertentu pada halaman dan gunakan JavaScript untuk mendapatkan maklumat daripada DOM
Pendekatan ini kurang diingini berbanding AJAX, tetapi ia masih mempunyai kelebihannya. Dari satu segi, ia masih relatif dipisahkan antara PHP dan JavaScript, kerana PHP tidak digunakan secara langsung dalam JavaScript.
Kelebihan
Keburukan
<input type=hidden>来存储信息，因为从inputNode.value中获取信息更容易，但这样做意味着你的HTML中有一个无意义的元素。HTML有<meta>元素用于文档的数据，HTML 5引入了data-*untuk data berkaitan JavaScript pada elemen tertentu.Contoh perlaksanaan
Dalam kes ini, anda perlu mencipta beberapa jenis elemen yang tidak kelihatan kepada pengguna tetapi boleh dilihat oleh JavaScript.
index.php
<!-- 省略 --> <div id="dom-target" style="display: none;"> <?php $output = "42"; // 再次，执行一些操作，获取输出。 echo htmlspecialchars($output); /* 必须转义，否则结果 将不是有效的HTML。 */ ?> </div> <script> var div = document.getElementById("dom-target"); var myData = div.textContent; </script> <!-- 省略 -->3. Gema data terus ke dalam JavaScript
Ini mungkin kaedah paling mudah untuk difahami.
Kelebihan