Bài viết này được đồng tác giả bởi biên tập viên của wikiHow, Darlene Antonelli, MA. Darlene Antonelli là Nhà văn và Biên tập viên Công nghệ cho wikiHow. Darlene có kinh nghiệm giảng dạy các khóa học đại học, viết các bài báo liên quan đến công nghệ và làm việc thực tế trong lĩnh vực công nghệ. Cô đã lấy bằng Thạc sĩ Viết văn tại Đại học Rowan vào năm 2012 và đã viết luận án của mình về các cộng đồng trực tuyến và các tính cách được tuyển chọn trong các cộng đồng đó
Bài viết này đã được xem 18,158 lần
Tìm hiểu thêm
Trong nhiều trường hợp, JavaScript được sử dụng ở phía máy khách và PHP được sử dụng ở phía máy chủ của trang web. WikiHow này sẽ hướng dẫn bạn cách truyền biến [hoặc dữ liệu] giữa JavaScript và PHP bằng phương thức "GET/POST" hoặc sử dụng cookie
bước
Nhập mã sau vào HTML của bạn
Passing JavaScript variables to PHP GeeksforGeeks- Mã này cho phép người dùng vào trang web của bạn nhập thông tin
Nhập mã sau vào mã PHP trên máy chủ của bạn
- Mặc dù người dùng đã nhập thông tin trong môi trường JavaScript, dữ liệu của họ sẽ được chuyển qua PHP ở phía máy chủ
Kiểm tra mã của bạn. Tải mã mới lên trang web của bạn, thường sử dụng FTP. Sau khi được tải lên, hãy nhập dữ liệu thử nghiệm để xem mã của bạn có hoạt động không
Ví dụ sau sẽ minh họa cách một trang web có thể lấy thông tin từ cơ sở dữ liệu bằng AJAX
Ví dụ
Thông tin cá nhân sẽ được liệt kê ở đây
Giải thích ví dụ - Cơ sở dữ liệu MySQL
Bảng cơ sở dữ liệu chúng tôi sử dụng trong ví dụ trên trông như thế này
idFirstNameLastNameTuổiQuê hươngCông việc1PeterGriffin41QuahogNhà máy bia2LoisGriffin40NewportGiáo viên dạy piano3JosephSwanson39QuahogSĩ quan cảnh sát4GlennVũng lầy41QuahogPhi côngVí dụ giải thích
Trong ví dụ trên, khi người dùng chọn một người trong danh sách thả xuống ở trên, một hàm có tên "showUser[]" được thực thi
Chức năng được kích hoạt bởi sự kiện onchange
Đây là mã HTML
Ví dụ
Thông tin cá nhân sẽ được liệt kê tại đây.
Run example »giải thích mã
Trước tiên, hãy kiểm tra xem người đó có được chọn không. Nếu không chọn người nào [str == ""], xóa nội dung của txtHint và thoát khỏi chức năng. Nếu một người được chọn, hãy làm như sau
- Tạo một đối tượng XMLHttpRequest
- Tạo chức năng sẽ được thực thi khi phản hồi của máy chủ đã sẵn sàng
- Gửi yêu cầu đến một tệp trên máy chủ
- Lưu ý rằng một tham số [q] được thêm vào URL [với nội dung của danh sách thả xuống]
Tệp PHP
Trang trên máy chủ được gọi bởi JavaScript ở trên là một tệp PHP có tên "getuser. php"
Mã nguồn trong "getuser. php" chạy truy vấn đối với cơ sở dữ liệu MySQL và trả về kết quả trong bảng HTML
Ví dụ sau minh họa cách một trang web có thể giao tiếp với máy chủ web trong khi người dùng nhập các ký tự vào trường nhập liệu
Ví dụ
Bắt đầu nhập tên vào trường nhập bên dưới
gợi ý
Họ
Ví dụ giải thích
Trong ví dụ trên, khi người dùng nhập một ký tự vào trường nhập liệu, một hàm có tên là
showHint[]sẽ được thực thiChức năng được kích hoạt bởi sự kiện
onkeyupĐây là mã
Ví dụ
Bắt đầu nhập tên vào trường nhập bên dưới
gợi ý
Họ.
Try it Yourself »giải thích mã
Trước tiên, hãy kiểm tra xem trường đầu vào có trống không [chuỗi. chiều dài == 0]. Nếu đúng như vậy, hãy xóa nội dung của trình giữ chỗ txtHint và thoát khỏi chức năng
Thực tế có một số cách tiếp cận để làm điều này. Một số yêu cầu nhiều chi phí hơn những cái khác và một số được coi là tốt hơn những cái khác
Không theo thứ tự đặc biệt
- Sử dụng AJAX để lấy dữ liệu bạn cần từ máy chủ
- Đưa dữ liệu vào trang ở đâu đó và sử dụng JavaScript để lấy thông tin từ DOM
- Echo dữ liệu trực tiếp đến JavaScript
Trong bài đăng này, chúng tôi sẽ kiểm tra từng phương pháp trên và xem ưu và nhược điểm của từng phương pháp, cũng như cách triển khai chúng
Phương pháp này được coi là tốt nhất, bởi vì tập lệnh phía máy chủ và phía máy khách của bạn hoàn toàn riêng biệt
ưu
- Tách biệt giữa các lớp tốt hơn - Nếu ngày mai bạn ngừng sử dụng PHP và muốn chuyển sang một servlet, API REST hoặc một số dịch vụ khác, bạn không phải thay đổi nhiều mã JavaScript
- Dễ đọc hơn - JavaScript là JavaScript, PHP là PHP. Không trộn lẫn cả hai, bạn sẽ có được mã dễ đọc hơn trên cả hai ngôn ngữ
- Cho phép truyền dữ liệu không đồng bộ - Lấy thông tin từ PHP có thể tốn thời gian/tài nguyên. Đôi khi bạn không muốn đợi thông tin, tải trang và nhận thông tin bất cứ khi nào
- Dữ liệu không được tìm thấy trực tiếp trên phần đánh dấu - Điều này có nghĩa là phần đánh dấu của bạn không chứa bất kỳ dữ liệu bổ sung nào và chỉ JavaScript mới nhìn thấy nó
Nhược điểm
- Độ trễ - AJAX tạo một yêu cầu HTTP và các yêu cầu HTTP được chuyển qua mạng và có độ trễ mạng
- Trạng thái - Dữ liệu được tìm nạp thông qua một yêu cầu HTTP riêng biệt sẽ không bao gồm bất kỳ thông tin nào từ yêu cầu HTTP đã tìm nạp tài liệu HTML. Bạn có thể cần thông tin này [e. g. , nếu tài liệu HTML được tạo để phản hồi lại việc gửi biểu mẫu] và, nếu bạn làm như vậy, sẽ phải chuyển nó qua một cách nào đó. Nếu bạn đã loại trừ việc nhúng dữ liệu vào trang [mà bạn có nếu bạn đang sử dụng kỹ thuật này] thì điều đó sẽ giới hạn bạn ở các cookie/phiên có thể tùy thuộc vào điều kiện chủng tộc
Ví dụ triển khai
Với AJAX, bạn cần hai trang, một trang là nơi PHP tạo đầu ra và trang thứ hai là nơi JavaScript nhận đầu ra đó
lấy dữ liệu. 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.mục lục. php [hoặc bất kỳ trang thực tế nào được đặt tên như thế]
Sự kết hợp trên của hai tệp sẽ cảnh báo
42khi tệp tải xongMột số tài liệu đọc thêm
Phương pháp này ít được ưa chuộng hơn AJAX, nhưng nó vẫn có những ưu điểm của nó. Nó vẫn còn tương đối tách biệt giữa PHP và JavaScript theo nghĩa là không có PHP trực tiếp trong JavaScript
ưu
- Nhanh chóng - Các thao tác DOM thường diễn ra nhanh chóng và bạn có thể lưu trữ cũng như truy cập nhiều dữ liệu tương đối nhanh chóng
Nhược điểm
- Đánh dấu có khả năng phi ngữ nghĩa - Thông thường, điều xảy ra là bạn sử dụng một số loại
để lưu trữ thông tin, bởi vì việc lấy thông tin ra khỏiinputNode.valuesẽ dễ dàng hơn, nhưng làm như vậy có nghĩa là bạn có một phần tử vô nghĩa trong HTML của mình. HTML có phần tửcho dữ liệu về tài liệu và HTML 5 giới thiệu thuộc tính
0 cho dữ liệu dành riêng cho việc đọc bằng JavaScript có thể được liên kết với các phần tử cụ thể - Làm bẩn nguồn - Dữ liệu mà PHP tạo ra được xuất trực tiếp sang nguồn HTML, nghĩa là bạn nhận được một nguồn HTML lớn hơn và ít tập trung hơn
- Khó lấy dữ liệu có cấu trúc hơn - Dữ liệu có cấu trúc sẽ phải là HTML hợp lệ, nếu không, bạn sẽ phải tự thoát và chuyển đổi chuỗi
- Kết hợp chặt chẽ PHP với logic dữ liệu của bạn - Vì PHP được sử dụng trong bản trình bày nên bạn không thể tách biệt rõ ràng cả hai
Ví dụ triển khai
Với điều này, ý tưởng là tạo ra một số loại phần tử sẽ không được hiển thị cho người dùng, nhưng hiển thị cho JavaScript
JavaScript có thể nói chuyện với PHP không?
JavaScript cũng có thể nói chuyện với mã PHP của bạn trên máy chủ web bất cứ khi nào nó cần cập nhật thứ gì đó [trên máy chủ hoặc trên trang web].Làm cách nào để chuyển đổi biến JS thành biến PHP?
Bạn có thể dễ dàng lấy giá trị biến JavaScript trên cùng một trang trong PHP. Hãy thử đoạn mã sauL. var res = "success";Chủ Đề