如何在 HTML 页面中检索 PHP 页面的内容？答案

【问题标题】：How to retrieve the contents of PHP page in HTML page?如何在 HTML 页面中检索 PHP 页面的内容？
【发布时间】：2019-03-14 10:20:15
【问题描述】：

我正在尝试使用查找偶数/奇数的示例来实现以下架构。我将客户端用作 HTML 文件，将 Web 服务器用作 PHP。

[ "FindEO.html" ] - HTML 文件如下所示：

<!DOCTYPE html>
<html>

<body>
  <h3>Check Even/ODD Number</h3>
  <form method="get" action="http://192.168.0.103:81/DUNNO/eo.php">
    Enter number: <input type="text" name="fname">
    <input type="submit">
  </form>

</body>

</html>

[ "EO.php" ] - PHP文件如下：

<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    $name = $_GET['fname'];
    $num = (int)$name;
    if (($num%2)==0) {
        echo "$name is Even";
    } else {
        echo "$name is Odd!";
    }   
} 
?>

当 HTML 文件被执行时，它要求输入为：

点击提交按钮后。 PHP 页面被显示，而不是在 HTML 文件中显示 PHP 页面的内容。

[当前显示（PHP 文件）：]

[它应该在 HTML 文件中显示 PHP 内容]

所以，请求是从 HTML 文件发送到 PHP 服务器，而不是从 PHP 文件到 HTML 文件的响应，而是直接显示 PHP 文件本身。

1) 这是否可以显示预期的输出。（PHP 在 HTML 文件中处理输出）？

2) 假设我将当前 PHP 代码存储在函数中：

<?php
function findeo($num){
    if (($num%2)==0) {
        echo "$name is Even";
    } else {
        echo "$name is Odd!";
    } 
}
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    $name = $_GET['fname'];
    $num = (int)$name;
    findeo($num);
} 
?>

那么如何传递参数（10或任意数字给$num变量）并调用findeo()函数HTML 文件中的 PHP 页面？

请有人帮我实现客户端 - 服务器架构，或者告诉我是否有任何其他方式可以使用 HTML 作为 client 和 该架构可以工作PHP 作为服务器。

【问题讨论】：

标签： php html client-server

【解决方案1】：

使用 javascript 将表单发送到 php 文件并检索答案。这是我的做法：

  function getAnswer(e) {
    e.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://192.168.0.103:81/DUNNO/eo.php', true);
    xhr.responseType = 'text';

    xhr.onload = function () {
        if (xhr.readyState === xhr.DONE) {
            if (xhr.status === 200) {
                document.getElementById('answer').textContent = xhr.response;
            }
        }
    };
    
    xhr.onerror = function() {
      document.getElementById('answer').textContent = "Error...";
    }

    xhr.send(null);
  }

<!DOCTYPE html>
<html>

<body>
  <h3>Check Even/ODD Number</h3>
  <form method="get" onsubmit="getAnswer(event)">
    Enter number: <input type="text" name="fname">
    <input type="submit">
  </form>
  
  <div id="answer"></div>

</body>

</html>

使用 preventDefault() 将阻止页面尝试提交表单，并允许 javascript 自行执行请求。另外，我在您的 HTML 中添加了一个 div，它将保存您的 PHP 文件给出的响应。

【讨论】：

感谢 Maor。我确实使用了 XHR 方法并搜索了如何执行它。但发现 XHR 需要 CORS (Cross Origin Resource Sharing) 策略（需要从客户端使用 IIS 完成）或 ActiveXObjects 需要能够执行 XHR 脚本。

【解决方案2】：

PHP 无法在页面内容提供给浏览器后对其进行修改。然而，这对于像 jQuery 这样的 JavaScript 库来说是微不足道的。或者通过使用 AJAX 调用 php 脚本来更新元素。 StackOverFlow 上有这样的例子：Change DIV content using ajax, php and jQuery

【讨论】：

谢谢亚历克斯，你能解释一下吗。我需要对 HTML 文件进行更改吗？如果是，那是什么。以及这个 PHP 文件将如何显示它的输出到 HTML 文件。
PHP 无法在页面内容提供给浏览器后对其进行修改。然而，这对于像 jQuery 这样的 JavaScript 库来说是微不足道的。或者通过使用 AJAX 调用 php 脚本来更新元素。 StackOverFlow 上有一些示例，例如：stackoverflow.com/questions/6506873/…
非常感谢 Alex，我确实看到了您的链接并找到了很多解决方案。
请将更新后的答案标记为正确，谢谢