Chào mừng bạn đến với hướng dẫn cách gọi tệp PHP từ Javascript. Vì vậy, bạn cần gọi một tập lệnh PHP để thực hiện một số xử lý từ Javascript?
Các cách phổ biến để gọi tập lệnh PHP bằng Javascript là
- Sử dụng AJAX để gọi tập lệnh PHP
- Sử dụng Fetch API để gọi tập lệnh PHP
- Chuyển hướng trang hiện tại sang tập lệnh PHP
- Gửi một biểu mẫu HTML ẩn, một phương pháp trường học cũ
- Cuối cùng, một phương pháp không chính thống – Tự động tạo thẻ tập lệnh trỏ đến tập lệnh PHP
Nhưng những điều này được thực hiện như thế nào?
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn 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 mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
GỌI PHP TỪ JS
Được rồi, bây giờ chúng ta hãy đi vào các cách thức và ví dụ gọi PHP từ Javascript
PHƯƠNG PHÁP 1] AJAX CUỘC GỌI PHP SCRIPT
1-ajax. html
function ajaxcall [] {
// [B1] GET FORM DATA
var data = new FormData[document.getElementById["myForm"]];
// [B2] AJAX CALL
var xhr = new XMLHttpRequest[];
xhr.open["POST", "0-dummy.php"];
xhr.onload = function [] {
console.log[this.response];
};
xhr.send[data];
return false;
}
Điều này sẽ khá đơn giản
- Chúng tôi có biểu mẫu HTML thông thường, sử dụng Javascript
onsubmit="return ajaxcall[]"
để xử lý việc gửi - Thực tế lấy dữ liệu từ biểu mẫu HTML và gửi nó đến máy chủ thông qua yêu cầu AJAX
P. S. Sử dụng //
chứ không phải file://
. Ngoài ra, các cuộc gọi AJAX giữa các miền sẽ không hoạt động ngay lập tức – Nó yêu cầu cài đặt thủ công trên máy chủ để cho phép các nguồn gốc chéo
PHƯƠNG PHÁP 2] SỬ DỤNG API FETCH ĐỂ GỌI PHP
2 lần tìm nạp. html
function fetchcall [] {
// [B1] GET FORM DATA
var data = new FormData[document.getElementById["myForm"]];
// [B2] FETCH
fetch["0-dummy.php", { method: "POST", body: data }]
.then[res => res.text[]]
.then[txt => console.log[txt]]
.catch[err => console.error[err]];
return false;
}
Nếu bạn đang thắc mắc liệu điều này có giống với AJAX không – Vâng, đúng vậy, fetch[]
được gọi là “phiên bản hiện đại hơn” của
function fetchcall [] {
// [B1] GET FORM DATA
var data = new FormData[document.getElementById["myForm"]];
// [B2] FETCH
fetch["0-dummy.php", { method: "POST", body: data }]
.then[res => res.text[]]
.then[txt => console.log[txt]]
.catch[err => console.error[err]];
return false;
}
0. Được cho là cung cấp các tùy chọn nâng cao hơn và linh hoạt hơn. Nhưng xin lưu ý, fetch[]
không được hỗ trợ trong các trình duyệt cũ
PHƯƠNG PHÁP 3] CHUYỂN ĐỔI JAVASCRIPT BẰNG CHUỖI CÂU HỎI
3 chuyển hướng. php
function redirect [] {
// [B1] URL SEARCH PARAMS [QUERY STRING]
var params = new URLSearchParams[];
params.set["numA", document.getElementById["numA"].value];
params.set["numB", document.getElementById["numB"].value];
// [B2] REDIRECTION
window.location.href = "3-redirect.php?" + params.toString[];
return false;
}
Trước khi những kẻ troll giận dữ nổi cơn thịnh nộ - Tôi biết đây không phải là "gọi trực tiếp PHP bằng Javascript", nhưng đây là một phương pháp trường học cũ mà chúng tôi sử dụng trước khi AJAX và Fetch thậm chí còn khả dụng. Không hoàn toàn được khuyến nghị trong thời đại hiện đại này, nhưng nó vẫn hoạt động tốt
PHƯƠNG PHÁP 4] NỘP MẪU JAVASCRIPT
4 dạng. php
function go [] {
document.getElementById["numA"].value = "123";
document.getElementById["numB"].value = "456";
document.getElementById["ninja"].submit[];
}
Tôi biết, đây không phải là "gọi trực tiếp PHP bằng Javascript", mà đây là một phương pháp cũ khác. Nên khá dễ hiểu – Chúng tôi chỉ cần gửi một biểu mẫu HTML ẩn bằng Javascript. Điều này vẫn còn khá tiện dụng, chỉ cần giữ nó như một "mánh khóe"
PHƯƠNG PHÁP 5] THẺ SCRIPT TRỎ VÀI PHP SCRIPT
5-không chính thống. html
function bad [] {
// [B1] URL SEARCH PARAMS [QUERY STRING]
var params = new URLSearchParams[];
params.set["numA", document.getElementById["numA"].value];
params.set["numB", document.getElementById["numB"].value];
params.set["BAD", 1];
// [B2] CREATE NEW SCRIPT & INJECT INTO HEAD
// NOT A GOOD WAY, AND NOT RECOMMENDED.
var tag = document.createElement["script"];
tag.src = encodeURI["0-dummy.php?" + params.toString[]];
document.head.appendChild[tag];
return false;
}
Cảnh báo ví dụ tiêu cực – Cách tạo
function fetchcall [] {
// [B1] GET FORM DATA
var data = new FormData[document.getElementById["myForm"]];
// [B2] FETCH
fetch["0-dummy.php", { method: "POST", body: data }]
.then[res => res.text[]]
.then[txt => console.log[txt]]
.catch[err => console.error[err]];
return false;
}
1 thú vị này đến từ một góc tối của Internet. Trong khi điều này hoạt động, nó cũng bị xa lánh trong thời hiện đại. Chỉ cần sử dụng AJAX hoặc Fetch
BIT BỔ SUNG & LIÊN KẾT
Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
LIÊN KẾT và THAM KHẢO
- Javascript AJAX – Hướng dẫn dành cho người mới bắt đầu – Code Boxx
- Truyền các biến và mảng PHP cho Javascript – Code Boxx
VIDEO HƯỚNG DẪN
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc