it-swarm.com.de

Wie ersetze ich die gesamte HTML-Webseite durch eine Ajax-Antwort?

Bevor ich auf die spezifische Frage eingehe, muss ich einige grundlegende Schritte erklären.

Erstens befasst sich die betreffende Anwendung mit der Verwaltung von Terminen durch Kunden online.

Nachdem der Kunde ein Formular mit den Behandlungen für das Beauty Center ausgefüllt und seine Informationen angegeben hat, gelangt er auf die Bestätigungsseite.

Jetzt führt diese Seite eine Ajax-Anfrage aus, um den Termin in der Datenbank zu speichern.

Wenn alles erfolgreich ist, wird eine Seite mit den Details des Termins mit der Erfolgsmeldung angezeigt.

Das Problem besteht darin, dass die Seite derzeit nur in der Antwort angezeigt wird, dh auf der Registerkarte Netzwerkkonsolenbrowser.

Meine Frage ist also einfach:How can I replace the entire structure of the html page with actual one shown in the response?

Ich habe viele Fragen im Web gefunden, sogar bei StackOverflow. All dies ist jedoch auf das Anhängen an ein div beschränkt. Ich muss nicht hängen, sondern muss auch den <html> ersetzen, um die HTML-Seite neu zu schreiben. Ich habe keine Ahnung, wie ich das machen soll und brauche einen Rat von dir.

Der Vollständigkeit halber ist dies der Code, der mir zurückkommt. Ajax response html:

       $.ajax({
          'type': 'POST',
          'url': 'backend_api/ajax_save_appointment',
          'data': postData,
          'success': function(response)
           {
               console.log(response);
           },
           'error': function(jqXHR, textStatus, errorThrown)
           {
               console.log('Error on saving appointment:', jqXHR, textStatus, errorThrown);    
           }
       });
7
Dillinger

Wenn Ihre Antwort die Tags <head> und <body> enthält: 

$("html").html(response);.

Wenn nicht, und es ist nur Inhalt, dann mache:

$("body").html(response);.

17
L Ja

wenn die Antwort der HTML-Inhalt ist, können Sie diese Codezeile verwenden:

...
'success': function(response)
       {
           $("body").html(response);
       }
...

aktualisieren:

es wird schwierig sein, das HTML-Tag zu ersetzen, aber was können Sie tun:

...
'success': function(response)
       {
           $("html").html($("html", response).html());
       }
...

sie analysieren die Antwort mit jquery, erhalten den Inhalt von HTML und ersetzen den Inhalt des aktuellen HTML

diese Frage wurde hier bereits behandelt: Ersetzen Sie die HTML-Seite durch Inhalte, die über AJAX abgerufen wurden.

Grundsätzlich können Sie es versuchen (Mein schlechtes, das funktioniert nicht im IE):

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

oder, da Sie Jquery verwenden

$("body").html(data);

Grüße

0
AdZaf

Vielleicht können Sie folgenden Code in Ihrer Erfolgsfunktion verwenden, um zu einer anderen Route umzuleiten. window.location.href = ' http: //Host.local/path/to/appointment-details ';

0
Artist Unknown

Ich habe nicht genug Wiederholungen, um einen Kommentar zu hinterlassen (!!), aber die UPDATE-Antwort von @ fribu-smart-solutions ( https://stackoverflow.com/a/33914275/1428972 ) sollte lauten als die richtige markiert, mit:

$("html").html($("html", response).html());

Dadurch wird die Seite über Ajax vollständig ersetzt. Dies erledigt die Arbeit richtig, während andere sogar "html" funktioniert nicht vollständig.

Ich weiß, dass dies ein alter Beitrag ist, aber er hat mein Problem in derselben Angelegenheit gelöst! :)

0

@JudgeProhet Es scheint mir, dass Sie keine AJAX) - Anfrage für diesen Zweck benötigen. Es hat keinen Vorteil, dies auf diese Weise zu tun. Wenn die gesamte Seite aktualisiert wird, kann dies über ein gewöhnliches HTTP erfolgen Wenn Sie AJAX verwenden möchten, können Sie einfach mit JavaScript auf eine neue Seite umleiten, die Termindetails enthält.

$.ajax({
   'type': 'POST',
   'url': '/backend/ajax_save_appointment',
   'data': postData,
   'success': function(response)
   {
      console.log(response);
      // redirect browser to new location
      window.location.href = '/backend/appointment_details';
   },
   'error': function(xhr, status, error)
   {
      console.log('Error on saving appointment:', xhr, status, error);
      // display error message to the user
   }
});
0
Artist Unknown