iframe versus div + jquery

8

Ich würde gerne wissen, was für das, was ich erreichen möchte, besser geeignet ist:

Auf meiner Hauptseite (main.php) habe ich Links zu verschiedenen Formularen: form1.php, form2.php, form3.php. Ich brauche die Seiten der Links in einem Teil der main.php, d. H. In einem div oder in einem iframe in der main.php, ohne die main.php zu aktualisieren. Die Formularseiten ermöglichen das Auffüllen, Löschen und Aktualisieren einer Datenbank. Wenn ich diese Aktionen mache, möchte ich nicht die main.php aktualisieren, sondern nur die entsprechende Formularseite. Meine erste Möglichkeit ist es, form1.php zum Beispiel in einem iframe von main.php zu öffnen. Wenn ich ein Formular absende, wird nur form1.php im iframe aktualisiert. Meine zweite Option ist die Verwendung von jquery: Öffnen Sie den Link (form1.php) in einem div von main.php. Übergeben Sie das Formular innerhalb des div und aktualisieren Sie nur das div.

Die zweite Option ist anspruchsvoller, da ich nicht viel Erfahrung mit Ajax und Jquery habe. Die erste Option ist für mich geradliniger. Ich frage mich, ob es Vorteile gibt, die zweite Option mit einem Div-Refresh im Vergleich zu Iframe zu verwenden, d. H. Kompatibilität mit verschiedenen Browsern und sonst ... Danke.

    
JMarc 03.08.2011, 15:07
quelle

2 Antworten

3

Ich würde empfehlen, jquery, ajax (XMLHttpRequest) zu verwenden. Iframes sind alt, nicht semantisch und Sie können nicht auf einen iframe innerhalb von main.php zugreifen.

%Vor%

dieses Snippet sollte funktionieren.
$("#submit_button_id").click(function(e) { : fängt die click-Funktion der zugewiesenen ID ab und erzeugt einen Trigger.

e.preventDefault(); : verhindert, dass das Formular regelmäßig gesendet wird, wir werden es mit jquery einreichen.

$.post sendet das Formular in POST method.

'form.php' ist Ihr Formular-Controller, der einen HTML-Code zurückgibt, der angezeigt werden soll.

("#form_name").serialize() Diese Funktion ist ein Dienstprogramm zum Serialisieren von zu sendenden Formularen. Es lädt die Eingabefelder und konvertiert sie in wie { field1: value, field2: value }

function(result) { ist der dritte Parameter, bei Erfolg führt $.post den 3. Parameter als Funktion an. Wir erstellen eine anonyme Funktion, um HTML unseres div. zu ersetzen.

$("#div_id").html(result) setzt den HTML-Wert des zugewiesenen Divs auf result Variable.

beziehen sich auf Ссылка , sie haben ein wunderbares Referenzblatt.

    
Umur Kontacı 03.08.2011, 17:00
quelle
1

Versuchen Sie $("#div").load("form.php"); von jQuery

  

Diese Methode ist die einfachste Methode, um Daten vom Server abzurufen. Es entspricht in etwa $ .get (URL, Daten, Erfolg), außer dass es eine Methode und keine globale Funktion ist und eine implizite Callback-Funktion hat. Wenn eine erfolgreiche Antwort erkannt wird (d. H. Wenn "textStatus" "success" oder "notmodified" lautet), legt .load () den HTML-Inhalt des übereinstimmenden Elements auf die zurückgegebenen Daten fest.

Referenz: .load () | jQuery-API-Dokumentation

    
Daniel Ruf 03.08.2011 16:41
quelle

Tags und Links