Detaillierte Erläuterung der Verwendung von Ajax zum Senden eines Formulars an die Datenbank (keine Aktualisierung)-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von Ajax zum Senden eines Formulars an die Datenbank (keine Aktualisierung)

亚连

Freigeben： 2018-05-21 16:17:22

Original

2745 Leute haben es durchsucht

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von Ajax zum Senden des Formulars an die Datenbank ein (ohne Aktualisierung). Der Artikel führt sie ausführlich anhand des Beispielcodes ein, der einen gewissen Referenz-Lernwert für jedermanns Studium oder Arbeit hat. Ich habe das Gefühl, dass interessierte Freunde kommen und einen Blick darauf werfen können.

Jeder sollte wissen, dass das Senden eines Formulars an die Datenbank auf einer statischen Seite sehr einfach ist

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

Nach dem Login kopieren

Der Nachteil ist, 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.

Was Ajax ist, gehen Sie zu Baidu, um es selbst herauszufinden.

Zuerst müssen wir eine Formulareinreichungsseite haben:

index.html

Diese Seite besteht aus zwei Teilen

1 Formularsteuerelemente

2. jQuery+Ajax-Verarbeitungsskript

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 sehr einfach

Es geht darum, 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

Der Datenbankname ist test und der Tabellenname ist testdata

Das Folgende ist ein Screenshot der Datenbank

An diesem Punkt ist dieser Fall abgeschlossen.

Natürlich implementiert der obige Code einfach das Ajax-Übermittlungsformular

Aber es gibt noch viele Details, die optimiert werden müssen, wie z. B. Formularüberprüfung, Datenverschlüsselung usw. Sie können erweitern, Lernen und verbessern Sie sich selbst.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

ajaxWelche Schritte sind erforderlich, um Daten an den Server zu senden

AjaxImplementierung der Anmeldefunktion

So stornieren Sie die jQueryAjaxAnfrage

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Ajax zum Senden eines Formulars an die Datenbank (keine Aktualisierung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!