PHP Dynamic Data Interaction: Optimieren Sie die Einreichung von Formular- und Datenbankoperationen über AJAX

In diesem Artikel werden Methoden für die effiziente Behandlung von dynamischen Datenaktualisierungen in Webanwendungen erörtert, insbesondere für "Akzeptieren" oder "Ablehnen" Vorgänge in Tabellen. Durch die Analyse der Einschränkungen der traditionellen Formulareinreichung empfehlen wir die Verwendung von AJAX -Technologie, um asynchrone Anfragen zu implementieren, wodurch die Aktualisierung und Verbesserung der Benutzererfahrung vermieden wird. Das Tutorial zeigt ausführlich, wie die Betriebstyp- und Daten-ID sicher an das Backend-PHP-Skript für Datenbankvorgänge übergeben kann, indem Sie HTML5-Datenattribute und JavaScript-Fetch-API verwenden.

Einschränkungen und Missverständnisse der traditionellen Formuntersuchung

Beim Erstellen von dynamischen Webanwendungen müssen wir häufig die Vorgänge der Benutzer in einer Reihe von Daten in der Liste verarbeiten, z. B. die Annahme oder Ablehnung einer Anforderung. Ein häufiges Missverständnis ist es, die _post -Variable durch $ _post ['Request_id'] = $ requests [$ j] ['Request_id'] zu "definieren"; Wenn PHP HTML erzeugt. Dieser Ansatz ist ungültig, da die _post hyperglobale Variable besiedelt ist, nachdem die HTTP -Postanforderung vom Server empfangen und analysiert wurde, anstatt Werte manuell zuzuweisen, wenn die Seite generiert wird. Wenn das Formular tatsächlich eingereicht wird, existieren diese manuell zugewiesenen Variablen nicht mehr.

Obwohl die traditionelle Formularübermittlungsmethode () die Datenübermittlung implementieren kann, verursacht sie die folgenden Probleme für Szenarien, in denen mehrere Datenzeilen erforderlich sind, um unabhängig voneinander zu arbeiten:

1. Aktualisierung von Seiten: Jede Einreichung führt dazu, dass die gesamte Seite die Benutzererfahrung neu lädt und unterbricht.
2. Komplexität: Wenn jede Zeile eine unabhängige Form hat, verursacht sie Redundanz in der Dom -Struktur; Wenn alle Operationen ein Formular teilen, ist eine komplexe Logik erforderlich, um zu unterscheiden, welche Zeile betrieben wird.
3. Nicht reibungslos: Häufige Aktualisierung der Seiten verringert die Arbeitseffizienz, wenn der Benutzer mehrere Vorgänge ausführt.

AJAX für die asynchrone Datenverarbeitung

Um die Einschränkungen der traditionellen Formulierung zu überwinden, nimmt die moderne Webentwicklung im Allgemeinen asynchrone JavaScript- und XML -Technologien (AJAX) an. Mit AJAX können Clients Daten mit dem Server austauschen, ohne die gesamte Seite neu zu laden. Dies bietet Benutzern ein reibungsloseres und schnelleres interaktives Erlebnis.

Ajax hat einen besonders offensichtlichen Vorteil bei der Behandlung von Akzeptanz-/Ablehnungsszenarien für Listendaten:

• Die Seite bleibt unverändert, nachdem der Benutzer auf die Schaltfläche geklickt hat.
• Nur die erforderlichen Daten werden an den Server gesendet.
• Nachdem der Server es verarbeitet hat, können die Ergebnisse (wie Erfolg, Fehler und aktualisierte Daten) an den Client zurückgegeben werden, und der Client aktualisiert die Seite teilweise entsprechend den Ergebnissen.

Implementieren Sie die AJAX-Anforderungsverarbeitung: Front-End-Teil

Wir werden ein Beispiel verwenden, um zu demonstrieren, wie die Anforderungen von Akzeptanz/Verweigerung in einer Tabelle mit AJAX umgehen.

1. HTML -Struktur und Dateneigenschaften

Zunächst müssen wir die erforderlichen Informationen für jede Datenreihe und ihre Betriebsschaltflächen erstellen, wenn PHP HTML generiert. Der entscheidende Punkt ist:

• Entfernen Sie das Tag: Da wir JavaScript verwenden, um Anfragen zu senden, ist das herkömmliche HTML -Tag nicht mehr erforderlich.
• Zeilen -ID: Setzen Sie Request_id auf das ID -Attribut des -Elements, um die JavaScript -Erfassung zu erleichtern.
• Datentyp-Attribut: Verwenden Sie HTML5-Datenattribute (z. B. Datentyp = 'Accept' oder Data-Typ = 'Deny'), um den Betriebstyp einer Taste zu markieren.

Hier ist der Beispielcode für PHP zum Generieren von Tabellenzeilen:

  php für ($ j = 0; $ j <count requests j>
    <tr id="'<?" php echo requests j request_id>' class = "table-row">
         Php 
            // Setzen Sie den Text gemäß dem Anforderungstyp fest, wenn ($ requests [$ j] ['request_type'] == '1') {
                $ request_type = 'Kandidat';
            } anders {
                $ request_type = 'Voter';
            } 
        ?>
        <td class="schul">  = $ request_type?> </td>
        <td class="name">  = $ requests [$ j] ['first_name']?> </td>
        <td class="candidates">  </td>
        <td> 
            <button data-type="'akzeptieren'" name="acceptreq" value="req_accepted" type="button" class="btn btn-success"> Akzeptieren </button> 
        </td>
        <td> 
            <button data-type="'Deny'" name="Denyreq" value="req_denied" type="button" class="btn Btn-danger"> Deny </button> 
        </td>
    </tr>
 Php Endfor; ?></count>

HINWEIS: Die Typ -Eigenschaft der Schaltfläche sollte auf die Schaltfläche gesetzt werden, um das Standard -Commit -Verhalten zu verhindern.

2. JavaScript -Verarbeitungslogik

Als nächstes verwenden wir JavaScript, um für Schaltflächen zu klicken und eine AJAX -Anfrage zu senden. Hier verwenden wir die moderne Fetch -API.

 <script>
    // Erstellen Sie ein Formdata -Objekt, um eine Postanforderung zu erstellen, lass FD = New FormData ();

    // Wählen Sie alle Schaltflächen mit name = "ACCEPTREQ" oder name = "DenyReq" document.querySelectorAll (&#39;button [name = "acceptreq"], button [name = "denyreq"]&#39;). Foreach (bttn => {
        bttn.addeventListener (&#39;click&#39;, function (e) {
            // Blockieren Sie das Standardverhalten von Schaltflächen (dies verhindert die Einreichung von Formular, wenn der Typ keine Schaltfläche ist).
            E.PreventDefault (); 

            // das übergeordnete <tr> Element der aktuell geklickten Schaltfläche TR = this.parentnode.closest (&#39;tr&#39;) abrufen;

            // Anrequent_id aus dem ID -Attribut von <tr> get ortieren_id
            fd.set (&#39;id&#39;, tr.id.trim ()); // Trim () verwenden, um mögliche Leerzeichen zu löschen // Erhalten Sie den Betriebstyp FD.set (&#39;Typ&#39;, this.dataset.typ);

            // Postanforderung mit Fetch API Fetch (&#39;../ Assets/Php/Accept-requests.inc.php&#39;, { 
                Methode: &#39;Post&#39;, 
                Körper: FD // FormData -Objekt als Anforderungskörper verwenden})
            .then (r => {
                If (!
                }
                return R.Text (); // die Antwort als Text analysieren})
            .then (text => {
                // die Rückruffunktion Warnung (Text); // Die vom Server zurückgegebene Nachricht taucht auf // Todo: Aktualisieren Sie hier die DOM entsprechend der Serverantwort, z. B. das Entfernen der Zeile // tr.remove ();
            })
            .Catch (e => {
                // Erfassungsfehler in der Anfrage oder der Antwortverarbeitungskonsole.Error (&#39;Anfrage fehlgeschlagen:&#39;, e);
                alarm (&#39;Die Operation ist fehlgeschlagen, bitte versuchen Sie es erneut.&#39;);
            });
        });
    });
</script>

JavaScript -Code detaillierte Erläuterung:

• FormData (): Wird verwendet, um eine Anforderungskörper in Form von Schlüsselwertpaaren zu erstellen, die für das Senden von Formulardaten sehr geeignet sind.
• document.querySelectorAll (): Wählen Sie alle Akzept- und Ablehnung von Schaltflächen auf der Seite.
• foreach () und addEventListener (): Fügen Sie für jede Schaltfläche einen Klickereignishörer hinzu.
• E.PreventDefault (): Blockiert das Standardverhalten der Schaltfläche und stellt sicher, dass die Anforderung durch JavaScript -Steuerung gesendet wird.
• this.parentnode.closest ('tr'): Dies zeigt auf die derzeit geklickte Schaltfläche. ParentNode erhält sein übergeordnetes Element , dem nächsten ('tr'), schaut nach oben zum nächsten -Ancestor -Element und erhält so die Zeile mit Request_ID.
• TR.ID.TRIM (): Ruft den ID -Attributwert von ab und verwendet TRIM (), um mögliche Whitespace -Zeichen zu entfernen.
• this.dataset.type: Ruft den Wert des Datentyps-Attributs auf der Schaltfläche ab.
• Fetch (): HTTP -Anfrage senden.
  • Methode: 'Post': Geben Sie die Anforderungsmethode an, um zu posten.
  • Körper: FD: Senden Sie das FormularData -Objekt als Anforderungskörper.
• .then (): Die erfolgreiche Antwort auf die Verarbeitung der Fetch -Anfrage. Der erste .then () überprüft den HTTP -Status, und das zweite .then () verwaltet den Reaktionskörpergehalt.
• .Catch (): Erfasst Netzwerkfehler, die während des Anforderungsprozesses oder anderer Fehler in der Versprechenkette auftreten können.
• DOM -UPDATE (TODO): In den tatsächlichen Anwendungen schreiben Sie nach erfolgreicher Verarbeitung der Anfrage hier in der Regel Code, um die Benutzeroberfläche zu aktualisieren, z. B. die Entfernung akzeptierter/abgelehnter Zeilen aus der Tabelle oder die Aktualisierung der Statusanzeige von Zeilen.

AJAX-Anforderungsverarbeitung implementieren: Backend-PHP-Teil (Accept-Requests.inc.php)

Auf der Serverseite (beispielsweise die ../assets/php/accept-requests.inc.php Datei) müssen Sie PHP-Code schreiben, um Daten zu empfangen, die von AJAX-Anforderungen gesendet werden und die entsprechenden Datenbankvorgänge ausführen.

  Php
// Stellen Sie sicher, dass Sie nur Postanfragen verarbeiten if ($ _server ['Request_method'] === 'Post') {
    // Die Daten senden vom Frontend $ requestId = $ _post ['id'] ?? Null;
    $ actionType = $ _post ['Typ'] ?? Null;

    // Daten überprüfen if ($ requestId === null || $ actionType === null) {
        http_response_code (400); // Ungültige Anforderung
        Echo "Fehler: Fehlende Anforderungs -ID oder Betriebstyp";
        Ausfahrt();
    }

    // Datenbankverbindung (Bitte ersetzen Sie sie durch Ihren tatsächlichen Datenbankverbindungscode)
    $ servername = "localhost";
    $ userername = "userername";
    $ password = "Passwort";
    $ dbname = "your_database";

    versuchen {
        $ conn = new PDO ("MySQL: host = $ sserNername; dbname = $ dbname", $ username, $ password);
        $ conn-> setAttribute (pdo :: attr_errmode, pdo :: errmode_exception);

        $ responemessage = "";

        Switch ($ actionType) {
            Fall "Akzeptieren":
                // Akzeptanzlogik ausführen, z. B. Aktualisierung des Status oder Löschen der Anforderung $ STMT = $ conn-> vorbereiten ("Aus Anfragen löschen wobei Request_id =: id");
                $ stmt-> bindparam (': id', $ requestId, pdo :: param_int);
                $ stmt-> execute ();
                $ responseMessage = "Request {$ requestId} wird akzeptiert und gelöscht.";
                brechen;
            Fall "verweigern":
                // Ablehnungslogik ausführen, z. B. Aktualisierung des Status oder Löschen von Anforderungen $ STMT = $ conn-> vorbereiten ("Aus Anfragen löschen wobei Request_id =: id");
                $ stmt-> bindparam (': id', $ requestId, pdo :: param_int);
                $ stmt-> execute ();
                $ responseMessage = "Request {$ requestId} wurde abgelehnt und gelöscht.";
                brechen;
            Standard:
                http_response_code (400); // Ungültige Anforderung
                Echo "Fehler: Ungültiger Betriebstyp";
                Ausfahrt();
        }

        echo $ responemessage; // Die Erfolgsnachricht an das Front End zurücksenden} catch (pdoException $ e) {
        http_response_code (500); // Interner Serverfehler
        Echo "Datenbankoperation fehlgeschlagen:". $ e-> getMessage ();
    } Endlich {
        $ conn = null; // Datenbankverbindung schließen}

} anders {
    http_response_code (405); // Methode nicht erlaubt
    echo "Nur Postanfragen sind erlaubt.";
}
?>

Detaillierte Erläuterung des PHP -Code:

• $ _Server ['request_method']: Stellen Sie sicher, dass nur Postanforderungen die Verarbeitungslogik eingeben können.
• $ _Post ['id'] und $ _post ['type']: PHP analysiert automatisch Daten, die von FormData gesendet werden und über $ _Post Hyperglobal -Variable darauf zugreifen.
• Datenüberprüfung: Stellen Sie vor dem Verarbeiten von Daten sicher, dass Request_id und ActionType existieren und effektiv sind, was eine grundlegende Anforderung für Sicherheit und Robustheit darstellt.
• Datenbankvorgänge: Verwenden Sie PDO für die Datenbankverbindung und -Operation. Es wird empfohlen, Vorverarbeitungsanweisungen (Vorbereitung und Bindparam) zu verwenden, um SQL -Injektionsangriffe zu verhindern.
• Switch -Anweisung: Führen Sie unterschiedliche Geschäftslogik aus (Akzeptieren oder Ablehnung) basierend auf dem Wert von ActionType.
• Antwort: Geben Sie das Verarbeitungsergebnis (z. B. Erfolgsnachricht oder Fehlermeldung) über Echo an das Frontend zurück.
• HTTP-Statuscode: Festlegen des entsprechenden HTTP-Statuscodes (z. B. 200 OK, 400 schlechte Anforderung, 500 interner Serverfehler, 405-Methode nicht zulässig) hilft dem Front-End-Verständnis der Serverantwort besser.

Stil Verschönerung (CSS)

Um ein besseres visuelles Feedback zu erzielen, können einige CSS -Stile hinzugefügt werden, wie z. B. Mausover -Effekte.

 *{{
  Übergang: Alle 100 ms.
  Schriftfamilie: Monospace
}
th {
  Hintergrund: RGBA (50,50,100,0,5);
  Farbe: weiß;
}
Tr {
  Rand: 0,25Rem;
}
TR: Hover TD {
  Hintergrund: RGBA (0,200,0,0,25);
}
TD,
th {
  Rand: 0,25Rem;
  Grenze: 1PX gepunktete RGBA (0,0,0,0,3);
  Polsterung: 0,45Rem
}
Taste: Hover {
  Cursor: Zeiger;
}
[Data-type = 'Accept']: Hover {
  Hintergrund: Limette
}
[Data-type = 'Deny']: Hover {
  Hintergrund: Rot;
  Farbe: weiß;
}

Zusammenfassung und Best Practices

In diesem Tutorial haben wir gelernt, wie man die AJAX -Technologie, insbesondere die Fetch -API, verwendet, um die dynamische Dateninteraktion in Webanwendungen zu optimieren. Diese Methode verbessert nicht nur die Benutzererfahrung, sondern macht auch die logische Trennung zwischen Front-End und Back-End klarer.

Wichtige Punkte Review:

• Vermeiden Sie manuelles Einstellen von $ _post: $ _post wird automatisch besiedelt, wenn der Server die Anforderung auflöst.
• * Verwenden Sie `Data- ` Attribut: ** Speichern Sie kleine Daten, die sich auf Elemente in HTML beziehen, was für JavaScript bequem ist.
• AJAX (API Fetch API): Implementieren Sie asynchrone Anfragen, um die Aktualisierung von Seiten zu vermeiden.
• FormData -Objekt: Konstruieren Sie die Post -Anfrage -Karosserie bequem.
• Backend -PHP -Verarbeitung: Empfangen Sie $ _post -Daten, führen Sie Datenbankvorgänge aus und geben Sie eine Antwort zurück.
• Sicherheit: Überprüfen und filtern Sie alle Benutzereingaben immer mithilfe von Vorverarbeitungsanweisungen, um die SQL -Injektion zu verhindern.
• Benutzerfeedback: Geben Sie während der AJAX -Anforderung Ladeanweisungen an und geben Sie ein klares Feedback, nachdem die Anforderung erfolgreich ist oder fehlschlägt (z. B. Nachrichtenaufforderungen, DOM -Updates).

Durch die Befolgung dieser Prinzipien können Sie effizientere, benutzerfreundlichere Webanwendungen erstellen.

Das obige ist der detaillierte Inhalt vonPHP Dynamic Data Interaction: Optimieren Sie die Einreichung von Formular- und Datenbankoperationen über AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!