Trước khi chuyển một biến từ PHP sang JavaScript, bạn cần hiểu luồng sự kiện khi bạn yêu cầu một trang PHP
PHP là ngôn ngữ phía máy chủ. Đầu tiên, PHP sẽ thực thi tệp
const data = "";
const data = ;
2 của bạn để tạo HTMLSau khi PHP xử lý mã của bạn, nó sẽ được gửi đến trình duyệt của khách hàng
Khi tệp được cung cấp cho trình duyệt, PHP không thể truy cập tệp nữa
Vì JavaScript chạy trong trình duyệt, điều đó có nghĩa là JavaScript được thực thi sau PHP
Biết được dòng quy trình này, có ba cách bạn có thể chuyển các biến PHP sang JavaScript
- Sử dụng echo để chuyển biến PHP sang JavaScript
- Sử dụng DOM để chuyển các biến PHP sang JavaScript
- Sử dụng tìm nạp để lấy dữ liệu PHP từ JavaScript
- Sự kết luận
Hãy bắt đầu học cách thực hiện ba phương pháp nêu trên
Sử dụng echo để chuyển biến PHP sang JavaScript
Khi bạn có một biến PHP trên cùng một trang với mã JavaScript, bạn có thể sử dụng
const data = "";
const data = ;
3 để chuyển trực tiếp biến đó từ PHP sang JavaScriptGiả sử bạn có một tệp
const data = "";
const data = ;
4 với nội dung sau
Passing PHP variable to JavaScript
const data = "";
const result = document.getElementById["result"];
result.innerText = data;
Khi bạn chạy đoạn mã trên, giá trị biến
const data = "";
const data = ;
0 sẽ được chuyển sang biến
const data = "";
const data = ;
1 trong JavaScriptĐể chứng minh rằng nó đã hoạt động, giá trị
const data = "";
const data = ;
1 sau đó được gán làm nội dung thẻ
const data = "";
const data = ;
3. Trình duyệt hiển thị đầu ra sauBiến tiếng vang PHP trong JavaScript
Với hàm
const data = "";
const data = ;
3, bạn có thể xuất ra một chuỗi bằng cách thêm các ký hiệu trích dẫn [đơn hoặc kép] trước thẻ
const data = "";
const data = ;
5 ở trênNếu bạn đang gửi một giá trị
const data = "";
const data = ;
6, thì bạn không cần ký hiệu trích dẫn
const data = "";
const data = ;
Khi bạn gửi một mảng PHP, bạn cần gọi hàm
const data = "";
const data = ;
7 trước khi chuyển nó tới JavaScript
const data = ;
Và đó là cách bạn chuyển một biến PHP sang JavaScript bằng cách gọi hàm
const data = "";
const data = ;
3Tiếp theo, hãy xem cách sử dụng DOM để chuyển các biến PHP sang JavaScript
Sử dụng DOM để chuyển các biến PHP sang JavaScript
Đôi khi, bạn có thể cần các biến PHP sau khi người dùng đã thực hiện một hành động như nhấp vào nút
Bạn cũng có thể có nhiều biến PHP mà bạn muốn chuyển và trong khi
const data = "";
const data = ;
3 hoạt động để gửi dữ liệu PHP tới JavaScript, bạn có thể muốn một giải pháp rõ ràng hơnBên cạnh việc gọi hàm
const data = "";
const data = ;
3, bạn cũng có thể sử dụng thẻ HTML DOM để lưu trữ dữ liệu PHPĐây là một ví dụ
const data = "";
const data = ;
0Bằng cách giữ dữ liệu PHP của bạn trong các thẻ DOM như được hiển thị ở trên, sau đó bạn có thể truy xuất dữ liệu bằng JavaScript như sau
const data = "";
const data = ;
1Phương pháp này tương tự như sử dụng trực tiếp
const data = "";
const data = ;
3, nhưng được coi là rõ ràng hơn vì bạn
const data = "";
const data = ;
3 tới DOM thay vì các biến JavaScriptBạn cũng có thể chọn thời điểm JavaScript sẽ truy xuất dữ liệu PHP. Đây không phải là trường hợp khi bạn
const data = "";
const data = ;
3 biến JavaScriptSử dụng tìm nạp để lấy dữ liệu PHP từ JavaScript
Khi bạn muốn tách mẫu PHP khỏi mã JavaScript của mình, thì bạn có thể sử dụng API tìm nạp JavaScript
API tìm nạp được sử dụng để gửi yêu cầu HTTP, tương tự như AJAX và XMLHTTPRequest. Điều này cho phép bạn truy xuất tài nguyên từ mọi nơi trên Internet
Tìm nạp có thể được sử dụng để truy xuất dữ liệu PHP bằng JavaScript. Giả sử bạn có một tệp PHP tên là
const data = ;
4 với nội dung sau
const data = "";
const data = ;
3Khi bạn đã có sẵn tệp PHP, hãy tạo một tệp
const data = "";
const data = ;
4 nơi bạn sẽ tìm nạp dữ liệu từ đóThêm thẻ
const data = ;
6 như hình bên dưới
const data = "";
const data = ;
5Hàm
const data = ;
7 sẽ gửi yêu cầu HTTP đến tệp
const data = ;
4Sau đó, hàm
const data = ;
9 sẽ phân tích cú pháp phản hồi dưới dạng đối tượng JSON. Cuối cùng, đối tượng JSON trả về sẽ được gán làm nội dung của thẻ
const data = "";
const data = ;
00 ở trênĐầu ra sẽ như sau
Truy xuất dữ liệu PHP bằng tìm nạp
Và đó là cách bạn chuyển các biến hoặc dữ liệu PHP sang JavaScript bằng cách sử dụng hàm
const data = ;
7Không giống như hai phương thức còn lại, phương thức này tạo một yêu cầu HTTP, vì vậy nó sẽ có độ trễ trước khi dữ liệu được tìm nạp
Bạn nên sử dụng Fetch API khi dữ liệu PHP của bạn yêu cầu xử lý phức tạp trước khi chuyển nó sang JavaScript
Sự kết luận
Để chuyển các biến và dữ liệu PHP sang JavaScript, bạn cần làm cho dữ liệu có thể truy cập được vào JavaScript
Bạn có thể
const data = "";
const data = ;
3 dữ liệu trực tiếp vào biến JavaScript hoặc bạn có thể giữ dữ liệu trong DOM trước khi truy xuất nó bằng đối tượng JavaScript
const data = "";
const data = ;
03Đối với dữ liệu có quá trình xử lý phức tạp, bạn có thể tạo một tệp riêng để xử lý dữ liệu PHP của mình. Bất kỳ phần nào trong ứng dụng của bạn yêu cầu dữ liệu đều có thể gửi yêu cầu HTTP để tìm nạp dữ liệu