Làm cách nào để chạy tệp JS trong PHP?

Đặt tập lệnh ở dưới cùng của phần tử sẽ cải thiện tốc độ hiển thị, vì việc giải thích tập lệnh làm chậm màn hình

JavaScript bên ngoài

Tập lệnh cũng có thể được đặt trong các tệp bên ngoài

tệp bên ngoài. myScript. js

function myFunction[] {
  tài liệu. getElementById["bản trình diễn"]. innerHTML = "Đoạn đã thay đổi. ";
}

Tập lệnh bên ngoài là thực tế khi cùng một mã được sử dụng trong nhiều trang web khác nhau

Các tệp JavaScript có phần mở rộng tệp. js

Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính [nguồn]

0 của

1

Một trong những khía cạnh ít được biết đến của JavaScript bên ngoài là khả năng tham chiếu tệp PHP thay vì tệp quen thuộc. tập tin js. Lúc đầu, một khái niệm như vậy có vẻ kỳ lạ, thậm chí là không thể; . Sử dụng JavaScript bên ngoài, bạn sẽ thấy cách PHP và JavaScript có thể hoạt động cùng nhau theo cách mà bạn có thể không nghĩ là có thể và lợi ích to lớn của JavaScript

cú pháp

Cú pháp để tham chiếu tệp PHP bằng JavaScript bên ngoài đủ phù hợp với những gì chúng ta đã biết

nơi "myscript. php" là đường dẫn tuyệt đối hoặc tương đối tới tập lệnh PHP thay vì thông thường. tập tin js. Bạn thậm chí có thể truyền tham số cho tập lệnh PHP thông qua chuỗi URL

Sau đó, tập lệnh PHP của bạn có thể truy cập các tham số này bằng cách sử dụng biến toàn cục

2. Vì vậy, có lẽ bạn đang tự hỏi tại thời điểm này. "Vậy bí quyết là gì?" . Vì chúng tôi đang gọi tập lệnh PHP một cách gián tiếp và thông qua JavaScript, nên đầu ra cuối cùng của tập lệnh PHP cần phải là JavaScript hợp lệ. Hãy nghĩ về nó như một động lực. js, bị giới hạn bởi các giới hạn giống như tệp thông thường. tập tin js. Một tập lệnh PHP bình thường được gọi bên trong trang PHP có thể xuất HTML thô và sửa đổi mã nguồn của trang. Phiên bản gọi JavaScript rõ ràng là không thể, nhưng đừng lo, có rất nhiều thứ nó có thể làm

Đây là một ví dụ cơ bản về tập lệnh PHP- ip. php- được gọi bởi JavaScript bên ngoài để làm điều gì đó mà một mình JavaScript không thể

" . $serverIP . "\"]";
?>

Và một khi được gọi bởi JavaScript bên ngoài

đầu ra

Ở phần trên, chúng tôi có một tập lệnh PHP bình thường ghi địa chỉ IP của khách truy cập khi được tham chiếu bằng JavaScript bên ngoài, với hai chi tiết quan trọng

• Tiêu đề JavaScript được gửi ngay từ đầu để thông báo cho trang rằng tập lệnh PHP của chúng tôi đang xuất tệp JavaScript
• Vì đầu ra cuối cùng của tập lệnh PHP của chúng ta cần phải hợp lệ. js, bất kể kết quả đầu ra PHP phải tuân theo cú pháp JavaScript hợp lệ. Vì vậy, để hiển thị địa chỉ IP theo quan điểm của JavaScript, hàm echo ở trên bao gồm "tài liệu. write[]" như một phần nội dung để gửi lại trang

Lưu ý cách tôi không tự xuất thẻ tập lệnh JavaScript [], giống như bên trong một tệp thông thường. js, tệp này không bắt buộc và cũng không hợp lệ

Khả năng tham chiếu tập lệnh PHP bên trong JavaScript bên ngoài của bạn có thể rất hữu ích. Điều đó có nghĩa là JavaScript của bạn hiện có quyền truy cập vào thông tin độc quyền một lần ở phía máy chủ, cho dù đó là thời gian của máy chủ, địa chỉ IP của khách truy cập, danh sách tất cả các tệp trong một thư mục nhất định hoặc thông tin cơ sở dữ liệu mySQL. Hơn nữa, ngay cả các trang HTML thông thường cũng có thể sử dụng thông tin này, vì tất cả những gì cần thiết là JavaScript trên các trang này, từ đó tham chiếu đến tập lệnh PHP mong muốn trên máy chủ của bạn hoặc hơn thế nữa. Bạn muốn hiển thị địa chỉ IP của khách truy cập trên trang html tĩnh - bất kỳ trang html nào?

Được rồi, đã đến lúc đưa phát hiện mới tìm thấy của chúng ta vào sử dụng tốt hơn- còn một trình chiếu JavaScript tự động xoay/hiển thị tất cả hình ảnh trong một thư mục thì sao?

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à

1. Sử dụng AJAX để gọi tập lệnh PHP
2. Sử dụng Fetch API để gọi tập lệnh PHP
3. Chuyển hướng trang hiện tại sang tập lệnh PHP
4. Gửi một biểu mẫu HTML ẩn, một phương pháp trường học cũ
5. 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ú

JS gọi PHP

Bit bổ sung & liên kết

Video hướng dẫn

Kết thúc

 

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

1. Chúng tôi có biểu mẫu HTML thông thường, sử dụng Javascript
   3 để xử lý việc gửi
2. 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

4 chứ không phải

5. 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,

6 được gọi là “phiên bản hiện đại hơn” của

7. Đượ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 ý,

6 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

________số 8

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

Làm cách nào tôi có thể bật JavaScript trong PHP?

Bạn có thể nhúng JS vào PHP không?

Làm cách nào để đưa JavaScript vào PHP?