Chào mừng bạn đến với hướng dẫn về cách chuyển các biến và mảng PHP sang Javascript. PHP là phía máy chủ và JavaScript là phía máy khách, vậy làm cách nào để kết hợp chúng lại với nhau?
Một cách nhanh chóng và dễ dàng để chuyển một biến từ PHP sang Javascript là sử dụng thẻ echo ngắn. Ví dụ
- <?php $phpvar = "FOO"; ?>
- var jsvar = "<?=$phpvar?>";
Nhưng có nhiều cách hơn để làm như vậy, tùy thuộc vào tình huống. Chúng tôi sẽ xem qua các ví dụ khác nhau trong hướng dẫn này – Đọc tiếp để tìm hiểu
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TLDR – TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống tất cả mã ví dụ trong tệp zip – Tôi đã phát hành mã này theo Giấy phép MIT, vì vậy vui lòng xây dựng trên mã đó nếu bạn muốn
CHUYỂN CÁC BIẾN PHP SANG JAVASCRIPT
Được rồi, bây giờ chúng ta hãy đi sâu vào các cách khác nhau để chuyển các biến PHP sang Javascript
VÍ DỤ 1) SỬ DỤNG PHP ĐỂ ECHO JAVASCRIPT
1A) MÃ JAVASCRIPT ECHO
1-echo-js. php
<!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) USE PHP TO ECHO JAVASCRIPT CODE --> <script> <?php echo "var jsvar = '$phpvar';"; ?> console.log(jsvar); </script>Chà, điều này có thể gây ngạc nhiên cho một số người mới bắt đầu, nhưng hãy nhớ rằng Javascript là một ngôn ngữ thông dịch?
1B) PHP THẺ ECHO NGẮN ĐẾN “CHÈN GIÁ TRỊ“
1b-ngắn-tiếng vang. php
<!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>Thực sự rất khó để thực hiện <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>1 mỗi lần, vì vậy đây là một tiện ích nhanh chóng trong PHP, thẻ echo ngắn <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>2. Đúng, điều này tương đương với việc làm <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>3
VÍ DỤ 2) CHÈN BIẾN PHP VÀO DẠNG HTML
2 đầu vào. php
<!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>Chúng tôi vẫn đang sử dụng thẻ echo ngắn PHP ở đây, nhưng “chèn” giá trị vào trường <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>4 HTML và sử dụng Javascript để lấy trường biểu mẫu. Một cách đường vòng, nhưng điều này có ý nghĩa nếu bạn đang làm việc với các biểu mẫu
VÍ DỤ 3) SỬ DỤNG JSON ĐỂ QUA Mảng
3-json. php
________số 8_______Đáng buồn thay, chúng ta không thể truyền một mảng (hoặc đối tượng) vì nó là. Trong trường hợp này, chúng ta có thể
- Sử dụng <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>5 trong PHP để biến mảng thành chuỗi được mã hóa JSON
- Thẻ echo ngắn PHP cũ tốt để xuất chuỗi, nhưng được kết hợp với Javascript <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>6 để biến chuỗi được mã hóa JSON trở lại thành một mảng
Ghi chú bổ sung nhanh và tóm tắt
- JSON là viết tắt của “Ký hiệu đối tượng tiêu chuẩn Javascript”. Một cách để biểu diễn mảng và đối tượng dưới dạng chuỗi
- PHP –
- <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>5 biến một mảng thành một chuỗi
- <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>8 biến chuỗi JSON trở lại một mảng
- Javascript –
- <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>9 biến một mảng thành một chuỗi
- <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) PHP SHORT ECHO TAG TO ECHO VARIABLE --> <script> var jsvar = "<?=$phpvar?>"; console.log(jsvar); </script>6 biến chuỗi trở lại một mảng
VÍ DỤ 4) AJAX ĐỂ TÌM GIÁ TRỊ
4A) HTML & JAVASCRIPT4a-ajax. html
<!-- (A) AJAX FETCH DATA FROM SERVER --> <script> function doAJAX () { fetch("4b-ajax.php") .then(res => res.text()) .then(data => console.log(data)); } </script> <!-- (B) GO! --> <input type="button" value="AJAX Fetch" title="doAJAX()">Nếu bạn chưa nghe thì AJAX là viết tắt của “Javascript và XML không đồng bộ”. Nói một cách đơn giản, gửi hoặc lấy dữ liệu từ máy chủ mà không cần tải lại toàn bộ trang. AJAX rất dễ thực hiện và có lẽ nó được coi là “cách thích hợp nhất để truyền biến”
- Lấy dữ liệu từ tập lệnh PHP – <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>1
- Sau đó trả về kết quả dưới dạng văn bản <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>2
- Cuối cùng, hãy làm bất cứ điều gì bạn cần với dữ liệu <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>3
P. S. Lưu ý thêm rằng AJAX sẽ không hoạt động với <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>4 (mở trực tiếp tệp HTML trong trình duyệt). Thay vào đó, hãy sử dụng một máy chủ web phù hợp với <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>5
4B) PHP PHÍA MÁY CHỦ
4b-ajax. php
<?php $phpvar = "Foo"; echo $phpvar;Về phía máy chủ, chỉ cần thực hiện bất kỳ thao tác xử lý PHP nào và xuất nó, điều này sẽ được chọn trong lệnh gọi AJAX – <!-- (A) PHP VARIABLE --> <?php $phpvar = "Foo"; ?> <!-- (B) INSERT INTO HTML FORM --> <form onsubmit="return demo()"> <input type="text" id="myTxt" value="<?=$phpvar?>"> <input type="submit" value="Go"> </form> <!-- (C) JS GET FIELD VALUE --> <script> function demo () { // (C1) GET FIELD VALUE var jsvar = document.getElementById("myTxt").value; console.log(jsvar); // (C2) PREVENT FORM SUBMIT return false; } </script>6
VÍ DỤ 5) JSON & AJAX ĐỂ QUA Mảng
5A) HTML & JAVASCRIPT
5a-ajax-json. html
<!-- (A) AJAX FETCH DATA FROM SERVER --> <script> function doAJAX () { fetch("5b-ajax.php") .then(res => res.json()) .then(data => console.log(data)); } </script> <!-- (B) GO! --> <input type="button" value="AJAX Fetch" title="doAJAX()">Vẫn còn nhớ "AJAX tìm nạp" từ trước đó?