Ajax-Formular an Datenbankinstanz senden-js-Tutorial-php.cn

Ajax-Formular an Datenbankinstanz senden

小云云

Freigeben： 2018-02-23 15:05:21

Original

5566 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function insert() {
            $.ajax({
                type: "POST",//方法
                url: "api.php" ,//表单接收url
                data: $(&#39;#form1&#39;).serialize(),
                success: function () {
                  //提交成功的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="成功!";
                },
                error : function() {
                  //提交失败的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="失败!";
                }
            });
        }
    </script>
</head>
<body>
<p id="form-p">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p><input name="title" id="title" type="text" value="title"/></p>
        <p><input name="url" id="url" type="text" value="url"/></p>
        <p><input type="button" value="插入" onclick="insert()"></p>
        <p><p id="success"></p></p>
    </form>
</p>
</body>
</html>

Nach dem Login kopieren

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

<?php
$title = $_POST[&#39;title&#39;];
$url = $_POST[&#39;url&#39;];
$con = mysql_connect("localhost","root","root");
if (!$con)
  {
  die(&#39;Could not connect: &#39; . mysql_error());
  }
mysql_select_db("test", $con);
mysql_query("INSERT INTO testdata (title, url) 
VALUES (&#39;$title&#39;, &#39;$url&#39;)");

mysql_close($con);
?>

Nach dem Login kopieren

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

Das Folgende ist ein Screenshot der Datenbank

Ajax-Formular an Datenbankinstanz senden

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!