Question

我已经看到有关此问题的问题和答案。例如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中的那个

testText.log的输出类似于：

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

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

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

Answer 1

通过包含你正在响应javascript的php文件，但你实际上并没有使用该响应。如果您想要重定向到该页面，则需要在响应中使用 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);           
}

Answer 2

根据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给出的答案并补充它（显示动态方法而不是改变页面1）。只是想我会提到它，如果这是一些人正在寻找的。

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

2 个答案: