Senden Sie das Formular mit Ajax an die Datenbank, ohne es zu aktualisieren-js-Tutorial-php.cn

Senden Sie das Formular mit Ajax an die Datenbank, ohne es zu aktualisieren

php中世界最好的语言

Freigeben： 2018-03-30 15:17:16

Original

1428 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Senden eines Formulars an die Datenbank ohne Aktualisierung vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Senden des Formulars an die Datenbank ohne Aktualisierung? sehen.

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 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.

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: $('#form1').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 dann Daten in die Datenbank einfü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 die Tabelle heißt testdata

Das Folgende ist ein Screenshot der Datenbank

An dieser Stelle dies Der Fall ist abgeschlossen.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung von Ajax und Formularen zur Implementierung der für registrierte Benutzer erforderlichen Funktionen

Ajax zur Implementierung dynamischer Kuchen Diagramme und Säulen Detaillierte Erläuterung der grafischen Diagramme

Das obige ist der detaillierte Inhalt vonSenden Sie das Formular mit Ajax an die Datenbank, ohne es zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!