So senden Sie ein Formular mit JavaScript

In der Webentwicklung ist ein Formular ein häufiges Element, das es Benutzern ermöglicht, Daten an einen Webserver zu übermitteln. Wenn der Benutzer Daten in das Formular eingibt und auf die Schaltfläche „Senden“ klickt, sendet das Formular eine Anfrage an den Server, und der Server verarbeitet die Anfrage und antwortet mit dem Ergebnis. In diesem Prozess kann JavaScript verwendet werden, um das Formularübermittlungsereignis abzuhören, sodass die Formulardaten verarbeitet und überprüft werden können, ohne dass die Seite aktualisiert werden muss. In diesem Artikel erfahren Sie, wie Sie ein Formular mit JavaScript senden.

1. Formularsteuerelemente

Bevor wir JavaScript zum Senden eines Formulars verwenden, müssen wir zunächst einige Kenntnisse über HTML-Formularsteuerelemente erwerben. Zu den Formularsteuerelementen gehören Eingabefelder, Dropdown-Felder, Optionsfelder, Kontrollkästchen usw. In HTML werden diese Steuerelemente mit -Tags definiert, und jedes Tag verfügt über ein Typattribut, um seinen Typ darzustellen. Beispielsweise kann ein Eingabefeld zum Eingeben von Text das Tag verwenden, und eine Schaltfläche zum Senden eines Formulars kann das Tag verwenden. Im Folgenden sind einige häufig verwendete Formularsteuerelemente und ihre Typen aufgeführt:

1 Textfeld

#🎜🎜 #

2. Passwortfeld

3. Kontrollkästchen

#🎜 🎜#Swimming

4. Optionsfeld

Male

5. Dropdown-Feld

< ;option value="beijing">Peking

Shanghai
Guangzhou < ;/option> Ereignis senden. In HTML wird das Formularübermittlungsereignis durch das Tag

definiert und Sie können es mit der Methode addEventListener() von JavaScript abhören. Der folgende Code wartet beispielsweise auf Ereignisse, wenn auf die Schaltfläche „Senden“ geklickt wird:

var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.addEventListener("click", function (event) {

//Formulardaten verarbeiten

event.preventDefault(); //Standardübermittlungsverhalten verbieten

});

In diesem Beispiel werden wir zuerst Übergeben Sie die Methode getElementById(), um das Element der Schaltfläche „Senden“ abzurufen, und rufen Sie die Methode addEventListener() auf, um auf ihr Klickereignis zu warten. In der Event-Handler-Funktion können wir die Formulardaten abrufen und verarbeiten. Um schließlich zu verhindern, dass das Standardübermittlungsverhalten des Formulars auftritt, rufen wir die Methode event.preventDefault() auf, um es abzubrechen.

3. Formulardaten abrufen

Nachdem wir uns das Formularübermittlungsereignis angehört haben, müssen wir die Formulardaten zur Verarbeitung abrufen. In JavaScript können Sie die Sammlung document.forms[] verwenden, um Formularelemente abzurufen. Der folgende Code ruft beispielsweise die Eingabefeldelemente ab, die den Benutzernamen und das Passwort darstellen:

var txtUsername = document.forms[0].username;

var txtPassword = document.forms[0 ].password ;

In diesem Beispiel verwenden wir document.forms[0], um das Formularelement des ersten -Tags abzurufen, und dann die Elemente der Benutzernamen- und Passwort-Eingabefelder durch das Namensattribut.

Eine andere Möglichkeit, Formulardaten abzurufen, ist die Verwendung eines FormData-Objekts. FormData ist eine neue API, mit der Formulardaten erstellt und an den Server gesendet werden können. Der folgende Code verwendet beispielsweise ein FormData-Objekt, um Benutzerinformationen zu übergeben:

var formData = new FormData();
formData.append("username", txtUsername.value);# 🎜🎜#formData .append("password", txtPassword.value);

In diesem Beispiel erstellen wir zunächst ein neues FormData-Objekt und verwenden dann die Methode append(), um Formulardaten zum hinzuzufügen FormData-Objekt. Übergeben Sie abschließend das FormData-Objekt an die send()-Methode des XMLHttpRequest-Objekts, um die Formulardaten an den Server zu senden.

4. Formulardaten überprüfen

Vor dem Absenden des Formulars müssen wir die Formulardaten überprüfen. Beispielsweise können wir prüfen, ob der Benutzername und das Passwort leer sind:

if(txtUsername.value == "") {

Alert("Bitte geben Sie den Benutzernamen ein");#🎜🎜 # txtUsername .focus();

return false; //Übermittlung abbrechen

} else if(txtPassword.value == "") {

warning("Bitte geben Sie Ihr Passwort ein");# 🎜🎜# txtPassword.focus();

return false; //Übermittlung abbrechen

} else {

//Formular senden

return true;
}#🎜🎜 ##🎜 🎜#In diesem Beispiel prüfen wir zunächst, ob das Eingabefeld für den Benutzernamen leer ist. Wenn es leer ist, wird ein Eingabeaufforderungsfeld angezeigt und der Cursor wird zum Eingabefeld für den Benutzernamen bewegt. Wenn der Benutzername nicht leer ist, prüfen wir weiterhin, ob das Passwort-Eingabefeld leer ist. Wenn das Passwort nicht leer ist, erlauben wir die Formularübermittlung.

5. Vollständiges JavaScript-Codebeispiel

Jetzt haben wir gelernt, wie man ein Formular mit JavaScript sendet. Hier ist ein vollständiges JavaScript-Codebeispiel, das auf das Submit-Ereignis des Formulars wartet, die Formulardaten abruft, die Daten validiert und an den Server sendet:

var frmLogin = document.getElementById("frmLogin");
frmLogin.addEventListener("submit", function(event) {
var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0] .password;

if(txtUsername.value == "") {

alert("请输入用户名");
txtUsername.focus();
event.preventDefault();

} else if(txtPassword.value == "") {

alert("请输入密码");
txtPassword.focus();
event.preventDefault();

} else {

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append("password", txtPassword.value);

var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.onload = function() {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    alert("请求失败：" + xhr.status);
  }
};
xhr.send(formData);

event.preventDefault();

}
});

in diesem Im Beispiel rufen wir zunächst das Element ab, das das Anmeldeformular darstellt, über die Methode getElementById() und rufen die Methode addEventListener() auf, um auf das Übermittlungsereignis zu warten. In der Ereignisverarbeitungsfunktion erhalten wir die Eingabefeldelemente Benutzername und Passwort und fällen eine Beurteilung. Wenn die Anforderungen nicht erfüllt sind, wird ein Eingabeaufforderungsfeld angezeigt und das standardmäßige Übermittlungsverhalten des Formulars wird abgebrochen. Wenn weder Benutzername noch Passwort leer sind, wird ein FormData-Objekt erstellt und die Daten werden diesem hinzugefügt. Verwenden Sie abschließend das XMLHttpRequest-Objekt, um das FormData-Objekt an den Server zu senden und das Antwortergebnis im Eingabeaufforderungsfeld anzuzeigen.

Das obige ist der detaillierte Inhalt vonSo senden Sie ein Formular mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：JavaScript implementiert 24 Uhr Nächster Artikel：Definiert Javascript private Methoden?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Investoren von Ethereum (ETH) wenden sich angesichts der Marktherausforderungen an Mpeppe (MPEPE).
  2024-09-20 00:42:11
• Solana (SOL) Wale nutzen Mpeppe (MPEPE) als wichtigen Teil ihrer langfristigen Anlagestrategie
  2024-09-20 00:39:43
• VeBetterDAO von VeChain konzentriert sich auf reale Maßnahmen zur Verschmelzung von Krypto und Nachhaltigkeit
  2024-09-20 00:33:10
• DTX-Börse (DTX) erreicht 1000 %-Rallye, während Dogecoin (DOGE) Whales Jump Ship
  2024-09-20 00:32:11
• Die Transaktionen von Dogecoin (DOGE) übertreffen Shiba Inu (SHIB), was ein erneutes Interesse am Memecoin signalisiert
  2024-09-20 00:31:11
• Kryptowährungspreis heute: Bitcoin-Preis strebt 66.000-Dollar-Marke an, Ethereum, Solana und XRP sehen grün
  2024-09-20 00:28:12
• Royal Canadian Mint enthüllt Umlaufmünze zum 100. Jahrestag der Royal Canadian Air Force
  2024-09-20 00:22:10
• In Kopenhagen ist endlich ein jahrhundertealter Schatz ans Licht gekommen
  2024-09-20 00:20:11
• Pepe Unchained (PEPU): Eine neue Meme-Krypto mit Layer-2-Funktionalität
  2024-09-20 00:18:13
• Die drei besten Memecoins, die das Potenzial haben, beim bevorstehenden Bullenmarkt groß rauszukommen
  2024-09-20 00:16:17

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1331

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

9

1427

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1249

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1153

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1234

verwandte Themen

Mehr>

• Welche Fensterfunktionen gibt es?
• Methode zur Registrierung eines Google-Kontos
• Was ist LAN?
• So installieren Sie den PS-Filter
• Eine einzelne Word-Seite ändert die Papierausrichtung
• So aktivieren Sie den sekundären Anmeldedienst
• So verwenden Sie JS-Code
• Zu welchem ​​Unternehmen gehört das Android-System?

Beliebte Empfehlungen

• Was ist eine URL-Adresse?
• Was bedeutet Webseite?
• Welche Programmiersprachen gibt es?
• Was ist die IT-Branche?
• Was bedeutet Fehler?

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1402901
• 
  php入门教程之一周学会PHP

  4230488
• 
  JAVA 初级入门视频教程

  2417650
• 
  小甲鱼零基础入门学习Python视频教程

  498073
• 
  PHP 零基础入门教程

  833845

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1402901 Lernzeiten
• 
  JAVA 初级入门视频教程

  2417650 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  498073 Lernzeiten
• 
  Web前端开发极速入门

  214154 Lernzeiten
• 
  零基础精通 PS 视频教程

  858708 Lernzeiten

• 
  【web前端】Node.js快速入门

  4656 Lernzeiten
• 
  国外Web开发全栈课程全集

  3611 Lernzeiten
• 
  Go语言实战之 GraphQL

  3099 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  558 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  16039 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！