Ganze Seite auf Ajax-Anfrage aktualisieren

Ich habe eine AJAX-Anfrage, die zwei mögliche Ergebnisse haben kann:

1. Der Server antwortet mit einer Nachricht, die ich in a platzieren sollte <div>
2. Der Server antwortet mit einer HTML-Seite, in diesem Fall muss ich die aktuelle Seite durch eine neue ersetzen und die Adresse ändern (der Client kennt die Adresse vor einer Anfrage).

Was wäre die Lösung, wenn ich die AJAX-Anforderung habe, die beide Fälle verarbeiten muss?

 url = "http://example.com"
 ajax.request(callback)

 function callback(response) {
     if (case2(response)) {
           history.pushState({}, "New page", url);
           document.innerHTML = response
     } else {
            updateDiv(response)
     }
 }

Ich bin daran interessiert, den ersten Zweig richtig zu implementieren, oder ob der Server irgendwie Header erstellen kann, die den Browser dazu bringen, eine Antwort als übliche HTTP-Antwort zu verarbeiten und eine Seitenposition und einen Seiteninhalt zu aktualisieren, so etwas wie eine Umleitung mit gegebenem Inhalt .

Ich verstehe, dass der Server einen Link anstelle einer Seite zurückgeben kann, aber in diesem Fall wird ein zusätzlicher Schritt auf einem Client benötigt – umleiten und dann die neue Seite auf dem Server füllen.

Ehrlich gesagt denke ich, dass dieser Ansatz im Grunde vom Design her gebrochen ist. Sie sollten diese Entscheidung nicht an diesem Ort treffen müssen. Beispielsweise könnte die Ajax-Antwort nur signalisieren, dass eine ganz neue Seite geladen und der neue Inhalt dann bei einer zweiten (Nicht-Ajax-)Anforderung an eine neue URL generiert werden soll.

Falls Sie gezwungen sind, den Weg zu gehen, den Sie bereits gehen, und der Antwortinhalt nicht sehr groß ist, können Sie es mit Javascript-URIs versuchen. Grundsätzlich ein URI in Form von javascript:"string" lädt eine neue Seite, für die diese Zeichenfolge der Quellcode ist. Also, wenn response ist bereits eine Zeichenfolge, nur zuweisen javascript:response zu window.location.href sollte genügen. Vielleicht musst du vorher etwas entkommen. Und ich weiß nicht, wie Cross-Browser-kompatibel dieser Ansatz ist.

<a href="https://stackoverflow.com/questions/5941933/javascript:response">load</a>

ist auch möglich.

Eine Variante davon besteht darin, die URL nicht mit dem Variablennamen, sondern mit den eigentlichen Zeichenfolgendaten aufzubauen. Wie

function source2url(src) {
    // make valid javascript string from source text
    var esc1 = src
        .replace(/\\/g, '\\\\')
        .replace(/\'/g, '\\\'')
        .replace(/\x0A/g, '\\x0A')
        .replace(/\x0D/g, '\\x0D');

    // make valid url from that
    return "javascript:'" + encodeURIComponent(esc1) + "'";
}

window.location.href = source2url(response);

Dies erzeugt natürlich ziemlich große URIs. Und Sie haben immer die Javascript-URI in der Adressleiste.

AKTUALISIEREN

Ein ähnlicher Ansatz besteht darin, die base64-Codierung in einem Daten-URI zu verwenden. Das Wikipedia-Eintrag erklärt, wie es funktioniert, einschließlich eines Javascript-Beispiels. Allerdings müssten Sie den Inhalt irgendwie base64-kodieren. (Hinweis: Sie können Daten-URIs mit oder ohne base64-Codierung verwenden. Sie müssen sehen, was Ihnen kürzere URIs für Ihren spezifischen Inhalt gibt.)

Ich hatte mal ein ähnliches Problem. Anstelle eines einfachen HTML-Snippets wurde eine vollständige Fehlerseite zurückgegeben. Wir haben dies schließlich behoben, indem wir die Logik geändert haben, aber hier ist eine der Lösungen, die ich gefunden habe:

document.open();
document.write(responseText);
document.close();

Der Grund, warum wir dies aufgegeben haben, ist, dass es im IE einige Probleme gab. Ich habe keine Zeit verloren, um zu untersuchen, warum, aber es hat eine Ausnahme „Zugriff verweigert“ ausgelöst, als versucht wurde, die Zeichenfolge zu schreiben. Ich glaube, es waren welche <meta> Tags, die IE verwirrten, oder vielleicht bedingte Kommentare, ich bin mir nicht sicher. (Es funktionierte, als ich einige einfache Seiten verwendete …)

Fazit ist: Sie sollten dies nicht tun müssen, aber wenn Sie nichts anderes tun können (wie das Zurückgeben einer URL-Zeichenfolge), könnte der obige Code funktionieren.

Es ist wirklich einfach, wenn die Antwort gültiges XML ist.

var new_doc = (new DOMParser).parseFromString(response, "application/xml");
document.replaceChild(document.adoptNode(new_doc.doctype), document.doctype);
document.replaceChild(document.adoptNode(new_doc.documentElement), document.documentElement);

Geben Sie dem Körper eine ID <body id="page"> und Ihr anderes div wird sein <div id="message"></div> Jetzt wird Ihr Ajax aussehen

 $.ajax({
      url:'myAjax.php',
      data:{datakey:datavalue},
      dataType:"JSON",
      success: function (response) {
           if(response.message=="your message")
           {
             $('#message').html(response.content);
           }
           else
           {
             $('#page').html(response.content);   
           }
      }
     });

wie T-Bull sagt … der ganze Prozess ist hier falsch ….

Sie verkomplizieren die Dinge einfach zu sehr und wissen das tatsächlich:

Ich verstehe, dass der Server einen Link anstelle einer Seite zurückgeben kann, aber in diesem Fall wird ein zusätzlicher Schritt auf einem Client benötigt – umleiten und dann die neue Seite auf dem Server füllen.

hör auf zu komplizieren und fang an, es gut zu machen …

1. Der Kunde öffnet die Seite zum ersten Mal, also verfolgen Sie sie $_SESSION['tmp_client_id'] = 'client_'.session_id(); Offensichtlich ist es besser, wenn der Client bereits abonniert ist, lege Sachen in die temporäre Tabelle ODER in eine andere Sitzungsvariable usw.
2. Kunde füllt das Formular aus;
3. Kunde sendet das Formular;
4. Machen Sie die AJAX-Anfrage;
5. Speichern $_POST variabel drin tmp_client_tbl mit ihm ist einzigartig tmp_client_id Oder nur $_SESSION['client_'.session_id()] = json_encode($_POST);
6. Ergebnis Nr. 1? Anzeigenachricht in a </div>
7. Ergebnis Nr. 2? Seite aktualisieren und überprüfen if( isset($_SESSION['client_'.session_id()])) { Wenn ja, lassen Sie uns das Formular erneut mit ausgefüllten Feldern anzeigen: } else { leeres Formular anzeigen;
8. SELECT * FROM tmp_client_tbl WHERE tmp_client_id = '{$_SESSION['tmp_client_id']}' ODER json_decode($_SESSION['client_'.session_id()]);
9. $form_data = $mysql_rows; ODER $json_array;
10. foreach($form_data as $name => $value) { echo "<input name="$name" value="$value" />" } auf eine Ninja-Weise, die davon ausgeht, dass Sie eine solche Art von Form Builder-Array haben, wo $form = array('text' => array('name','lastname'), 'select' => array('countries'), ... )ODER einfach durch <input name="lastname" value="{$lastname}" /> wobei die Feldwerte mit leeren Variablen vorbelastet sind;
11. Zeit abgelaufen, Fehler aufgetreten, Browser geschlossen? session_destroy(); oder unset($_SESSION['client_'.session_id()]);