2016-06-15 15 views
0

Ich habe Fragen und Antworten zu diesem Thema gesehen. Zum Beispiel How to return a HTML file as the response to a POST request?, aber ich habe Probleme mit der Implementierung der Lösungen. Hier ist ein Beispiel für einen PHP-Code in einem Verzeichnis namens websiteIssue, das nicht funktioniert, und ich bin nicht sicher warum.HTML-Datei als Antwort auf eine POST-Anfrage?

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> 

Beim ersten Laden funktioniert es wie erwartet, der HTML-Code in screen1.php wird im Browser angezeigt, aber wenn der Button auf der Seite gedrückt wird, bleibt der HTML-Code der selbe, anstatt in screen2.php zu wechseln:

die Ausgabe an testText.log ist so etwas wie:

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

wie mag offensichtlich sein, ich bin ein Neuling auf diesem, und hoffentlich gibt es einige grundlegende Sache, die ich nicht getan habe. Der Browser, auf dem ich es ausführe, ist Firefox. Jede Hilfe würde sehr geschätzt werden.

Kleiner Hinweis: Ich habe den Code für diesen Beitrag manuell abgetippt und habe ihn nicht ausgeführt (die Maschine, auf der der Webserver läuft, ist nicht mit dem Internet verbunden), hoffentlich gibt es keine Syntaxfehler, aber ich habe einen Tippfehler gemacht irgendwo.

Antwort

0

Mit der PHP-Datei reagieren Sie auf das Javascript, aber Sie verwenden diese Antwort eigentlich für nichts. Wenn Sie auf diese Seite umleiten möchten, müssen Sie in der Antwort location.assign verwenden. Um das zu tun:

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);   
} 
+0

Danke für die Antwort :) Ich fügte den Code, den Sie vorgeschlagen (mit der() nach dem Wort Funktion) aber festgestellt, dass ich einen xmlRequest.status von 404 und der XMLRequest.responseText wurde HTML mit Objekt nicht gefunden wurde!. Irgendwelche Ideen warum sollte das sein? – Glenn

+0

Sorry, das war wegen eines Fehlers, den ich gemacht habe (ich hatte einen etwas anderen Code in case.php). Ihr Vorschlag funktioniert gut Ich habe nur die Klammern() nach der Funktion (nur erwähnen, falls jemand anderes versuchen wollte), und änderte die Includes in case.php zu drucken. Sie müssen nur den passenden Code für die $ -Seite zu den Bildschirm-PHP-Dateien hinzufügen. – Glenn

0

Basierend auf der Antwort von Felipe Souza machte ich folgende Änderungen der Seite zu ermöglichen, dynamisch modifiziert werden, anstatt eine Umleitung zu sein. Dachte, ich würde teilen, wie es eine andere Lösung, die einige von Interesse sein könnten.

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> 

Es scheinen einige potenzielle Vorteile, dass die Datenmenge für die neuen Bildschirme gesendet wird kleiner, und (nicht sicher, ob es sinnvoll ist) die Struktur der Website ist mehr verschleierte . Wie auch immer, es basiert auf der Antwort von Felipe Souza und ergänzt sie (zeigt einen dynamischen Ansatz statt einer wechselnden Seite).Ich dachte nur, ich würde es erwähnen, wenn es das ist, wonach manche gesucht haben.