Warum werden Formulare innerhalb eines $.load()-Aufrufs nicht korrekt gepostet und wie kann AJAX dieses Problem lösen?

Formular innerhalb von $.load Wird nicht korrekt gepostet? Eine detaillierte Erklärung des Problems

Es kommt häufig vor, dass Formulare, die in einen über $.load geladenen Bereich eingebettet sind, Daten nicht korrekt veröffentlichen. Der Kern des Problems liegt in der asynchronen Natur von $.load, das Inhalte in ein bestimmtes Element lädt, ohne die gesamte Seite neu zu laden. Dies kann zu einer Diskrepanz zwischen der Zielaktion des Formulars und der tatsächlichen URL führen, unter der sich die Seite befindet.

Um das Problem zu veranschaulichen, betrachten wir ein Beispiel:

<pre class="brush:php;toolbar:false">
    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&amp;Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);
    $('#CenterPiece').load(Readthis); 

In diesem Beispiel: wann Wenn Sie auf eine Schaltfläche klicken, wird Code ausgeführt, der Inhalte aus „MonsterRequest.php“ in ein Element mit der ID „CenterPiece“ lädt. Da $.load jedoch asynchron ist, erfolgt die Formularübermittlung, bevor der Inhalt von „MonsterRequest.php“ vollständig geladen ist. Dies bedeutet, dass das Formular an die URL der aktuellen Seite gesendet wird und nicht an die beabsichtigte Ziel-URL, die im Aktionsattribut angegeben ist.

AJAX verstehen und wie es das Problem löst

Um das Problem zu lösen , ist es notwendig, AJAX (Asynchronous JavaScript and XML) zu verwenden. AJAX ermöglicht Webseiten die asynchrone Kommunikation mit Servern, ohne dass die gesamte Seite neu geladen werden muss. Dadurch wird sichergestellt, dass Formulare, die in dynamisch geladene Inhalte eingebettet sind, Daten korrekt an das beabsichtigte Ziel übermitteln können.

Im Wesentlichen ermöglicht AJAX Ihnen, Daten an eine PHP-Datei auf dem Server zu senden, die Daten zu verarbeiten und eine Antwort zurückzugeben, ohne dass dies erforderlich ist Neuladen der Seite. Der Arbeitsablauf ist wie folgt:

Datei Nr. 1:

<pre class="brush:php;toolbar:false">
    <script>
        $(document).ready(function() {
            $('#Sel').change(function() {
                var opt = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "receiving_file.php",
                    data: 'selected_opt=' + opt,
                    success:function(data){
                        alert('This was sent back: ' + data);
                    }
                });
            });
        });
    </script>

Wenn sich in diesem Skript das Dropdown-Menü „Auswahl“ ändert, wird eine AJAX-Anfrage ausgelöst. Die Anfrage wird an „receiving_file.php“ gesendet und enthält den Wert der ausgewählten Option.

Datei Nr. 2: getting_file.php

<pre class="brush:php;toolbar:false">
    <?php
        $recd = $_POST['selected_opt'];
        echo 'You chose: ' . $recd;
    

In dieser PHP-Datei Die empfangenen Daten werden in der Variablen $recd gespeichert und eine Antwort wird an die zurückgegeben Client.

Ergebnis:

Wenn die Option in „Datei Nr. 1“ geändert wird, wird eine AJAX-Anfrage an „Datei Nr. 2“ gestellt. Die Daten werden verarbeitet und eine Antwort wird an den Client zurückgesendet, ohne dass die Seite neu geladen werden muss.

Das obige ist der detaillierte Inhalt vonWarum werden Formulare innerhalb eines $.load()-Aufrufs nicht korrekt gepostet und wie kann AJAX dieses Problem lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!