如何从JavaScript调用PHP函数

与 javascript 相比，php 提供了更多的内置函数来处理字符串、数组和其他类型的数据。因此，很多人自然会有从 JavaScript 调用 PHP 函数的冲动。但是，正如您可能已经猜到或发现的那样，这并没有按预期工作。

在很多其他情况下，您可能希望在 javaScript 中运行一些 PHP 代码——例如，在服务器上保存一些数据。在这种情况下，简单地将 PHP 代码放在 JavaScript 中也行不通。

您不能简单地从 JavaScript 调用 PHP 函数的原因与这些语言的运行顺序有关。PHP 是一种服务器端语言，而 JavaScript 主要是一种客户端语言。

每当您想访问一个页面时，浏览器都会向服务器发送一个请求，然后服务器处理该请求并通过运行 PHP 代码生成一些输出。然后将输出或生成的webp时代发回给您。浏览器通常期望网页由 html、css和 JavaScript 组成。当网页在浏览器中加载时，您可能在 JavaScript 中放置或回显的任何 PHP 要么已经运行，要么根本不会运行。

但是，所有的希望都没有丢失。在本教程中，我将解释如何从 JavaScript 调用 PHP 函数和从 PHP 调用 JavaScript 函数。

从 JavaScript 调用 PHP 函数

我们可以使用ajax对浏览器内部生成的数据调用 PHP 函数。许多网站都使用 AJAX 来更新部分网页，而无需重新加载整个页面。如果做得好，它可以显着改善用户体验。

请记住，PHP 代码仍将在服务器本身上运行。我们将只为它提供脚本中的数据。

使用jquery AJAX 运行 PHP 代码

如果您在您的网站上使用 jQuery，那么使用您想要运行的代码调用任何 PHP 文件变得非常容易。

您可以向ajax()函数传递一个或两个参数。当传递两个参数时，第一个将是浏览器将发送您的请求的网页的 URL。当您只向传递一个参数时ajax()，将在配置中指定 URL。

第二个参数包含一堆不同的配置选项，用于指定您打算处理的数据以及在成功或失败的情况下如何处理等。配置选项以 JSON 格式传递。

您可以使用该method参数来指定应该用于发出请求的 HTTP 方法。我们将其设置为，post因为我们也将向服务器发送数据。

现在，让我们看一个基本 AJAX 请求的示例，我们将在其中将数据传递给 PHP 文件并wordwrap()在该文件中调用 PHP 函数。这是我们的完整网页：

<!doctype html> <html> <head> <meta charset=utf-8> <title>PHP Function in JavaScript Demo</title> <style> body {     font-family: 'Lato';     font-weight: 400;     font-size: 1.4rem; } p {     text-align: center; margin-bottom: 4rem; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <p>The United States (U.S. or US)—officially the United States of America (USA), commonly known as America—is a country primarily located in North America, consisting of 50 states, a federal district, five major self-governing territories, 326 reservations, and various possessions. At 3.8 million square miles (9.8 million square kilometers), it is the world's third- or fourth-largest country by total area. With a population of more than 328 million people, it is the third most populous country in the world. The national capital is Washington, D.C., and the most populous city is New York City.</p> <p></p> <script> $.ajax({   method: "POST",   url: "wrap.php",   data: { text: $("p.unbroken").text() } })   .done(function( response ) {     $("p.broken").html(response);   }); </script> </body> </html>

将以下代码放在同一目录中名为wrap.php的文件中。

<?php
$text = $_POST['text'];
$output = wordwrap($text, 60, "<br>");
echo $output;
?>

请记住，您必须echo将数据发送回浏览器。如果一切顺利，您的网页将如下图所示。

如何从JavaScript调用PHP函数第1张

使用fetch API 运行 PHP 代码

您还可以使用 Fetch API 通过向服务器发送 POST 请求来对浏览器内收集的数据运行 PHP 代码。在前面的示例中，我们可以将 AJAX 代码替换为以下 JavaScript 以获得相同的结果。

fetch('wrap.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    body: "text=" + document.queryselector("p.unbroken").innerText
  })
  .then(response => response.text())
  .then(data => document.querySelector("p.broken").innerHTML = data);

就像在 AJAX 示例中一样，我们指定 URL 并提供额外的标头信息，我们将以 URL 编码形式发送我们的数据。这允许我们$_POST在服务器端使用来读取数据。

从 PHP 调用 JavaScript 函数

如您所知，当您从某个服务器请求网页时，PHP 将在 JavaScript 之前运行。我们还可以使用 .输出任何我们想在网页上显示的内容echo。同样echo可以用于输出将在客户端浏览器中运行的 JavaScript。

这是一些示例代码，它将检查字符串数组以查找最后一个回文的索引。该索引存储在 PHP 变量中，然后script使用echo.

<?php

$words = ['apple', 'radar', 'mango', 'civic', 'banana'];

$pal_index = 0;
$last_pal = 0;
foreach($words as $word) {
  if($word == strrev($word)) {
    $last_pal = $pal_index;
  }
  echo '<p>'.ucfirst($word).'</p>';
  $pal_index += 1;
}
?>
<script>
<?php
echo 'let p_el = document.querySelectorAll("p")['.$last_pal.']';
?>
let red = Math.round(p_el.getBoundingClientRect().top)%256;
let green = Math.round(p_el.getBoundingClientRect().right)%256;
p_el.style.color =  "rgb(" + red + ", " + green + ", 0)";
</script>

上面的示例显示了如何通过简单地回显数据将数据从 PHP 传递到 JavaScript。只需确保您回显的代码是有效的 JavaScript。