Hướng dẫn can javascript execute php? - javascript có thể thực thi php không?

Question

Có hai cách gọi chức năng PHP từ JavaScript tùy thuộc vào kiến trúc dự án web của bạn:

Bạn có thể gọi chức năng Php Inline từ thẻ

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

6

Bạn có thể sử dụng phương thức

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

7 JavaScript và gửi yêu cầu HTTP đến máy chủ PHP

Hướng dẫn này sẽ giúp bạn tìm hiểu cả hai cách một cách dễ dàng. Hãy bắt đầu với việc gọi chức năng PHP nội tuyến

Gọi chức năng PHP từ JavaScript Inline

Nếu bạn sử dụng các tệp PHP để hiển thị các trang web của mình, thì bạn có thể gọi chức năng PHP từ JavaScript bằng cách gọi chức năng PHP

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

8.

Giả sử bạn có tệp

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

0 với nội dung sau:

<?php
function add($x, $y){
  return $x + $y;
}
?>

Sau đó, bạn viết nội dung HTML của mình ngay bên dưới chức năng như sau:

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

Bạn có thể bao gồm thẻ

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

6 bên trong thẻ

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

2 gọi vào chức năng PHP như sau:

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

Khi bạn mở tệp

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

0 của mình từ trình duyệt, bạn sẽ thấy HTML được hiển thị như sau:

<body>
  <h2 id="header">8</h2>
  <script>
    const result = 8;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

Bất kỳ mã PHP nào bạn bao gồm bên trong trang HTML của bạn sẽ được xử lý ở phía máy chủ trước khi được phục vụ cho trình duyệt.

Khi bạn gọi chức năng Php Inline từ JavaScript như được hiển thị ở trên, bạn có thể sử dụng các giá trị động từ đầu vào của người dùng.

Nếu bạn muốn gọi chức năng PHP như một phản hồi cho hành động của người dùng, thì bạn cần gửi yêu cầu HTTP từ JavaScript đến tệp PHP. Hãy để học hỏi điều đó tiếp theo.

Gọi chức năng PHP từ JavaScript qua yêu cầu HTTP

Để gửi yêu cầu HTTP từ JavaScript đến máy chủ PHP, bạn cần thực hiện như sau:

Tách tệp PHP của bạn khỏi tệp HTML của bạn

Gọi chức năng PHP qua yêu cầu HTTP bằng phương thức JavaScript

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

7

Đầu tiên, tách chức năng PHP của bạn trong một tệp khác. Hãy để Gọi cho tệp

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

5 và đặt nội dung sau bên trong nó:

<?php
$x = $_POST['x'];
$y = $_POST['y'];

echo $x + $y;
?>

Tiếp theo, tạo một tệp

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

6 trong cùng một thư mục trong đó bạn đã tạo tệp

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

5 và đặt nội dung sau bên trong nó:

<?php
function add($x, $y){
  return $x + $y;
}
?>

1

Phương thức

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

7 sẽ được thực thi mỗi lần nhấp vào phần tử

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

9. JavaScript sẽ gửi yêu cầu

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

0 đến máy chủ PHP và viết phản hồi bên trong phần tử

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

1.

Trong mã trên, tôi đã sử dụng URL đầy đủ của

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

5 của mình, được đặt tại

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

3. Bạn cần thay đổi địa chỉ thành vị trí tệp PHP thực tế của bạn.

Khi các tệp của bạn đã sẵn sàng, hãy mở tệp

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

6 từ trình duyệt. Vui lòng đảm bảo rằng bạn sẽ mở tệp HTML từ cùng một máy chủ phục vụ các tệp PHP của bạn để tránh các sự cố CORS.

Bạn có thể chạy một máy chủ PHP cục bộ bằng lệnh

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

5 và mở

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

6 từ trình duyệt để xem trang HTML của bạn.

Khi bạn nhấp vào nút, phương thức

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

7 sẽ được thực thi và JavaScript sẽ đặt phản hồi bên trong phần tử

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

8.

HTML kết quả sẽ như sau:

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

1

Bây giờ mã của bạn đang hoạt động, bạn có thể thêm các phần tử

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

9 vào trang HTML và gán các giá trị mà người dùng đặt trong các phần tử đó cho các biến

<body>
  <h2 id="header">8</h2>
  <script>
    const result = 8;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

0 và

<body>
  <h2 id="header">8</h2>
  <script>
    const result = 8;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

1. Hàm PHP sẽ có thể thêm các giá trị động một cách chính xác

Và đó là hai cách bạn có thể gọi chức năng PHP từ JavaScript. Thường xuyên hơn, bạn muốn tách các tệp PHP khỏi các tệp JavaScript và gọi chức năng PHP bằng các yêu cầu HTTP.

Mẫu tương tự cũng hoạt động khi bạn đang phát triển ứng dụng web bằng cách sử dụng khung PHP hiện đại như Laravel và các thư viện JavaScript hiện đại như React và Vue.

Bạn có thể sử dụng phương thức

<?php
function add($x, $y){
  return $x + $x;
}
?>

// Other HTML tags omitted for clarity
<body>
  <h2 id="header"></h2>
</body>

7 và gửi yêu cầu

<body>
  <h2 id="header"></h2>
  <script>
    const result = <?php echo add(5, 3)?> ;
    document.getElementById("header").innerHTML = result;
  </script>
</body>

0 đến đúng tuyến API Laravel mà bạn đã tạo và gửi đúng tham số.