Ajax-Formular an Datenbankinstanz senden

Das Senden eines Formulars an die Datenbank auf einer statischen Seite ist sehr einfach

<form action="test.php" method="post">
</form>

Der Nachteil besteht darin, dass die Seite aktualisiert wird und die Seite springt. Die Technologie, die ich Ihnen heute vorstelle, ist die Ajax-Formularübermittlung. Der Vorteil besteht darin, dass die Seite nicht aktualisiert wird, nicht zur Seite gesprungen wird und die Übermittlung stillschweigend erfolgt.

Zuerst müssen wir eine Formularübermittlungsseite haben:

index.html
Diese Seite besteht aus zwei Teilen
Formularsteuerung
2 Skript
Das jQuery-Skript ruft die Formulardaten ab und sendet sie per Post an api.php

b317222a318de8270818dffaffdd385c
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    b2386ffb911b14667cb8f0f91ea547a7login test6e916e0f7d1e588d4f442bf645aedb2f
    a71ddd814d1e6bfc91cd420de31796d5
    997f162832870813a4bba3cd209ffad62cacc6d41bbb37262a98f745aa00fbf0
    8019067d09615e43c7904885b5246f0a
        function insert() {
            $.ajax({
                type: "POST",//方法
                url: "api.php" ,//表单接收url
                data: $('#form1').serialize(),
                success: function () {
                  //提交成功的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="成功!";
                },
                error : function() {
                  //提交失败的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="失败!";
                }
            });
        }
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e1d846a265bf300ddc7f4a80b95329f3
    d141580f4a41fe1ee835e89737c04401
        e388a4556c0f65e1904146cc1a846bee0581997439755c399a6c92b9221be45d94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee15bdbefafd8a17e62bcaf970c51328ab94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee2cdb61f75629cb4e00b15553abed93b194b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee77361903f13dcd26502e2c12536599cd94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
    f5a47148e367a6035fd7a2faa965022e
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Das Folgende ist die Formularempfangsseite
api.php
Diese Seite ist eigentlich ganz einfach
besteht darin, eine Verbindung zur Datenbank
herzustellen und sie dann in die Datenbank einzufügen
Die beiden in die Datenbank eingefügten Werte sind
Titel und URL

17154344e9e2a6fb548e020bf5ec4cb0

Dann müssen wir eine Datenbank erstellen
Datenbankname Für den Test lautet der Tabellenname testdata

Das Folgende ist ein Screenshot der Datenbank

An diesem Punkt ist dieser Fall abgeschlossen.
Natürlich implementiert der obige Code lediglich die Ajax-Formularübermittlung
Es gibt jedoch noch viele Details, die optimiert werden müssen, z. B. Formularüberprüfung, Datenverschlüsselung usw. Sie können selbst erweitern, lernen und verbessern.

Verwandte Empfehlungen:

Die Seite mit dem Ajax-Einreichungsformular aktualisiert die J-Lösung weiterhin.

JS-Einreichungsformular und Implementierung Methode zum Übergeben von Parametern

js-Implementierungsmethode zum Senden eines Formulars und Festlegen des Formularanforderungspfads

Das obige ist der detaillierte Inhalt vonAjax-Formular an Datenbankinstanz senden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!