Tôi có thể chạy mã php trong javascript không?

JavaScript là ngôn ngữ kịch bản phía máy khách và PHP là ngôn ngữ kịch bản phía máy chủ. JavaScript được sử dụng làm phía máy khách để kiểm tra và xác minh chi tiết máy khách và PHP là phía máy chủ được sử dụng để tương tác với cơ sở dữ liệu. Trong PHP, HTML được sử dụng như một chuỗi trong mã. Để hiển thị nó cho trình duyệt, chúng tôi tạo mã JavaScript dưới dạng một chuỗi trong mã PHP

ví dụ 1. Viết mã JavaScript trong mã PHP

________số 8

echo

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

<?php 2

<?php 3

đầu ra

ví dụ 2. Viết mã JavaScript bên ngoài mã PHP (trong cùng một tệp PHP)

<?php 4

<?php 5<?php 6

<?php 3

<?php 8<?php 9____90

<?php 5echo2____93

Call JS Function



jsFunction();';
?>

echo5

đầu ra

ví dụ 3. Hàm JavaScript – Thao tác DOM (trong cùng một tệp PHP)

<?php 4

<?php 5echo echo9<?php 2

<?php 3

<?php 8

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

<?php 5

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

Call JS Function



jsFunction();';
?>

echo5

đầu ra

110

JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này

PHP là ngôn ngữ kịch bản phía máy chủ được thiết kế dành riêng cho phát triển web. Bạn có thể học PHP từ đầu bằng cách làm theo Hướng dẫn PHP và Ví dụ về PHP này

PHP chạy trên máy chủ. Nó đọc của bạn. php, chạy PHP mà nó tìm thấy, gửi HTML tới trình duyệt và thoát

Không có "hành động ma quái từ xa" cho phép bạn chạy mã PHP từ bên trong mã Javascript

Không chắc chắn những gì bạn đang cố gắng để đạt được. Bạn có thể sử dụng Ajax để gửi một số dữ liệu đến máy chủ PHP của mình. Nhưng nó sẽ chạy một kịch bản mới

Có thể ý của bạn là bạn muốn PHP xử lý các tệp JS trước khi chúng được gửi đi. Đó là một câu hỏi PHP, nhưng tôi nghĩ gần đây đã được trả lời ở đây. Các tệp JS thường không được PHP xử lý, nhưng dường như có một cách để định cấu hình PHP để làm như vậy. Google là bạn của bạn. Hoặc hỏi trên diễn đàn PHP

PHP là ngôn ngữ lập trình phía máy chủ, có nghĩa là nó thực thi ở cuối máy chủ và nó sẽ trả về mã HTML. Mặt khác, Javascript là ngôn ngữ kịch bản phía máy khách (chạy ở trình duyệt máy khách), được sử dụng bình thường để xác thực chi tiết máy khách

ví dụ 1. Gọi hàm Javascript đã khai báo ở phần đầu

Trong ví dụ này, chúng tôi đang gọi hàm Javascript là “jsFunction” được khai báo trong phần đầu

Call JS Function



jsFunction();';
?>

Mã vận hành

đầu ra

Bạn có thể thực thi Javascript thông qua PHP bằng cách gọi mã/hàm javascript dưới dạng một chuỗi trong PHP và gửi nó tới trình duyệt máy khách để thực thi. Xem ví dụ 2

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 & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

GHI CHÚ NHANH

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

<!-- (A) HTML FORM -->
<form id="myForm" onsubmit="return ajaxcall();">
  <input type="text" name="name" value="Jon" required>
  <input type="email" name="email" value="[email protected]" required>
  <input type="submit" value="Save">
</form>

<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

Đ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

   <!-- (A) HIDDEN HTML FORM -->
   <form id="ninja" method="post" style="display:none;">
     <input type="hidden" id="numA" name="numA" required>
     <input type="hidden" id="numB" name="numB" required>
   </form>
    
   <!-- (B) JAVASCRIPT -->
   <input type="button" value="Go!" onclick="go()">
   <script>
   function go () {
     document.getElementById("numA").value = "123";
     document.getElementById("numB").value = "456";
     document.getElementById("ninja").submit();
   }
   </script>
   
   <!-- (C) RESULTS-->
   <?php 
   if (isset($_POST["numA"])) { require "0-dummy.php"; }
   ?>

   9 để 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

<!-- (A) HTML FORM -->
<form onsubmit="return bad();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Add">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

<!-- (A) HTML FORM -->
<form onsubmit="return bad();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Add">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

PHƯƠNG PHÁP 2) SỬ DỤNG API FETCH ĐỂ GỌI PHP

2 lần tìm nạp. html

<!-- (A) HTML FORM -->
<form id="myForm" onsubmit="return fetchcall();">
  <input type="text" name="name" value="Jon" required>
  <input type="email" name="email" value="[email protected]" required>
  <input type="submit" value="Save">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

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,

<!-- (A) HTML FORM -->
<form onsubmit="return bad();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Add">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

<!-- (A) HTML FORM -->
<form onsubmit="return bad();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Add">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

<!-- (A) HTML FORM -->
<form onsubmit="return bad();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Add">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

PHƯƠNG PHÁP 3) CHUYỂN ĐỔI JAVASCRIPT BẰNG CHUỖI CÂU HỎI

3 chuyển hướng. php

<!-- (A) HTML FORM -->
<form onsubmit="return redirect();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Go!">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

<!-- (C) RESULTS -->
<?php 
if (isset($_GET["numA"])) { require "0-dummy.php"; }
?>

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

<!-- (A) HIDDEN HTML FORM -->
<form id="ninja" method="post" style="display:none;">
  <input type="hidden" id="numA" name="numA" required>
  <input type="hidden" id="numB" name="numB" required>
</form>
 
<!-- (B) JAVASCRIPT -->
<input type="button" value="Go!" onclick="go()">
<script>
function go () {
  document.getElementById("numA").value = "123";
  document.getElementById("numB").value = "456";
  document.getElementById("ninja").submit();
}
</script>

<!-- (C) RESULTS-->
<?php 
if (isset($_POST["numA"])) { require "0-dummy.php"; }
?>

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

<!-- (A) HTML FORM -->
<form onsubmit="return bad();">
  <input type="number" id="numA" value="123" required>
  <input type="number" id="numB" value="456" required>
  <input type="submit" value="Add">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

Cảnh báo ví dụ tiêu cực – Cách tạo

<!-- (A) HTML FORM -->
<form id="myForm" onsubmit="return fetchcall();">
  <input type="text" name="name" value="Jon" required>
  <input type="email" name="email" value="[email protected]" required>
  <input type="submit" value="Save">
</form>
 
<!-- (B) JAVASCRIPT -->
<script>
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;
}
</script>

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

Chúng tôi có thể sử dụng mã PHP trong JavaScript không?

Làm cách nào để đưa tập lệnh PHP vào JavaScript?