HTML 文件作为对 POST 请求的响应？答案

【问题标题】：HTML file as the response to a POST request?HTML 文件作为对 POST 请求的响应？
【发布时间】：2016-10-16 23:31:08
【问题描述】：

我已看到有关此问题的问题和答案。例如How to return a HTML file as the response to a POST request?，但在实施解决方案时遇到问题。这是一个名为 websiteIssue 的目录中的一些 php 代码示例，它不起作用，我不知道为什么。

index.php

<?php

if(isset($_POST['page']))
{
     $page = $_POST['page'];
}
else
{
     $page = "";
}

include 'case.php';
?>

case.php

<?php
$testLog = 'testLog.txt';

$fileHandle = fopen('testLog.txt', 'a');
fwrite($fileHandle, '$page = '.$page."\n";

switch($page)
{
     case "screen2":
          include 'screen2.php';
          fwrite($fileHandle, 'including screen2.php'."\n");
          break;
     default:
          include 'screen1.php';
          fwrite($fileHandle, 'including screen1.php'."\n");
          break;
}
fclose($fileHandle);
?>

screen1.php

<!DOCTYPE html>
<html lang="en">
     <head>
          <title>screen1.php</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

     </head>

     <body>
          <button type="button" onClick=dataSubmit({page:"screen2"})> Screen 1 => Screen2</button>

          <script>
               function dataSubmit(data)
               {
                    var xmlRequest = new XMLHttpRequest();
                    var formData= new FormData();

                    for(name in data)
                    {
                         formData.append(name, data[name]);
                    }

                    xmlRequest.open('POST', 'http://localhost/websiteIssue/');
                    xmlRequest.send(formData);           
               }
          </script>
     </body>
</html>

screen2.php

<!DOCTYPE html>
<html lang="en">
     <head>
          <title>screen2.php</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

     </head>

     <body>
          <button type="button" onClick=dataSubmit({page:"screen1"})> Screen 2 => Screen1</button>

          <script>
               function dataSubmit(data)
               {
                    var xmlRequest = new XMLHttpRequest();
                    var formData= new FormData();

                    for(name in data)
                    {
                         formData.append(name, data[name]);
                    }

                    xmlRequest.open('POST', 'http://localhost/websiteIssue/');
                    xmlRequest.send(formData);           
               }
          </script>
     </body>
</html>

在初始加载时，它按预期工作，screen1.php 中的 html 显示在浏览器中，但是当按下页面上的按钮时，html 保持不变，而不是更改为 screen2.php 中的html

testText.log 的输出类似于：

$page = 
including screen1.php
$page = screen2
including screen2.php

很明显，我是这方面的新手，希望有一些我没有做过的基本事情。我运行它的浏览器是 Firefox。任何帮助将非常感激。

小记：我为这篇文章手动重新输入了代码，并没有运行它（运行网络服务器的机器没有连接到互联网），希望没有语法错误，但我可能在某处打错了.

【问题讨论】：

标签： javascript php html post xmlhttprequest

【解决方案1】：

根据 Felipe Souza 给出的答案，我进行了以下修改，以允许动态修改页面而不是重定向。想我会分享，因为它是另一种解决方案，有些人可能会感兴趣。

index.php

<?php

if(isset($_POST['page']))
{
    $page = $_POST['page'];         
    include 'case.php';
}
else 
{
    include 'base.php';
}


?>

case.php

<?php

switch($page)
{
    case "screen2":
        include('screen2.php');
        break;
    case "screen1":
        include('screen1.php');
        break;
    default:
        include('screen1.php');
        break;  
}

?>

base.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>base.php</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    </head>

    <body>
        <div id="container" style="width:100%; height:100%">
        <?php

            if(!isset($_POST['page']))
            {
                $page = "";
                include 'case.php';
            }
        ?>

        </div>

        <script>
         function dataSubmit(data)
         {

            var xmlRequest = new XMLHttpRequest();
            var formData   = new FormData();

            xmlRequest.onreadystatechange=function()
            {

                if(xmlRequest.readyState==4 && xmlRequest.status==200)
                {   
                    document.getElementById("container").innerHTML = xmlRequest.responseText;           
                }

            }

            for(name in data)
            {
                formData.append(name, data[name]);
                console.log(name + ":" + data[name]);
            }

            xmlRequest.open('POST', 'http://localhost/websiteIssue/');
            xmlRequest.send(formData);

         }
        </script>
    </body>
</html>

screen1.php

<button type"button" onClick=dataSubmit({page:"screen2"})> Screen 1 => Screen 2</button>

screen2.php

<button type"button" onClick=dataSubmit({page:"screen1"})>Screen 2 => Screen 1</button>

似乎有一些潜在的优势，即为新屏幕发送的数据量较小，并且（不确定是否有用）网站的结构更加隐蔽。无论如何，它基于 Felipe Souza 给出的答案并对其进行了补充（显示了一种动态方法，而不是改变页面）。只是想我会提到它，如果那是一些人正在寻找的。

【讨论】：

【解决方案2】：

通过包含 php 文件，您正在响应 javascript，但实际上您并没有将该响应用于任何事情。如果您想要重定向到该页面，则需要在响应中使用 location.assign。为此：

function dataSubmit(data)
{
    var xmlRequest = new XMLHttpRequest();
    var formData= new FormData();

    // Redirects user to response when received.
    xmlRequest.onreadystatechange=function{
        if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
             location.assign(xmlRequest.responseText);
        }
    };

    for(name in data)
    {
         formData.append(name, data[name]);
    }

    xmlRequest.open('POST', 'http://localhost/websiteIssue/');
    xmlRequest.send(formData);           
}

【讨论】：

感谢您的回复 :) 我添加了您建议的代码（在单词 function 之后使用 ()）但发现我得到的 xmlRequest.status 为 404 并且 xmlRequest.responseText 是 html 找不到对象！。有什么想法吗？
抱歉，这是因为我犯了一个错误（我在 case.php 中的代码略有不同）。你的建议很好我只是在函数之后添加了括号 ()（只是提到以防其他人想尝试），并将 case.php 中的包含更改为打印。只需要将 $page 的适当代码添加到屏幕 php 文件中。