programming php

Làm cách nào để gọi một trang PHP từ một trang PHP khác?

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 hay không – Vâng, đúng vậy, fetch[] được gọi là “phiên bản hiện đại hơn” của new XMLHttpRequest[]. Đượ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 hãy 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 tức giận 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