So verwenden Sie Ajax, um ein Formular mit JavaScript zu bedienen

Dieses Mal werde ich Ihnen JavaScript zeigen, wie Sie Ajax zum Betreiben des Formulars verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Ajax zum Betreiben des Formulars in JavaScript gelten. Das Folgende ist a Praktischer Fall, werfen wir einen Blick darauf.

Die Verwendung von JavaScript zum Betreiben von Formularen ähnelt dem Betreiben von DOM, da das Formular selbst ebenfalls ein DOM-Baum ist.

Das Eingabefeld, das Dropdown-Feld usw. des Formulars können jedoch Benutzereingaben empfangen, sodass die Verwendung von JavaScript zur Bedienung des Formulars den vom Benutzer eingegebenen Inhalt abrufen oder neuen Inhalt für eine Eingabe festlegen kann Kasten.

Die Eingabesteuerelemente des HTML-Formulars umfassen hauptsächlich die folgenden Typen:

• Text Feld, entsprechend , wird zum Eingeben von Text verwendet

• Passwortfeld, entsprechend , wird verwendet Passwort;

• Das entsprechende Optionsfeld wird zum Auswählen eines Elements verwendet; 

  Kontrollkästchen
, entsprechendes , dient zur Auswahl mehrerer Elemente

• Dropdown-Feld, entsprechendes ;, wird zum Auswählen eines Elements verwendet;

  Versteckter Text, entsprechend

  , ist für den Benutzer nicht sichtbar, wird aber beim Öffnen des Formulars ausgeblendet wird übermittelt Text wird an den Server gesendet.

Wert abrufen

Wenn wir einen Verweis auf einen -Knoten erhalten, können wir den Wert direkt aufrufen Rufen Sie den entsprechenden Benutzereingabewert ab:

Diese Methode kann auf Text, Passwort, Ausblenden und Auswählen angewendet werden. Bei Optionsfeldern und Kontrollkästchen gibt das Wertattribut jedoch immer den voreingestellten HTML-Wert zurück, und was wir tatsächlich benötigen, ist, ob der Benutzer die Option „geprüft“ hat, daher sollten wir zur Beurteilung „geprüft“ verwenden:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

Wert festlegen

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

Das Festlegen eines Werts ähnelt dem Abrufen eines Werts, indem Sie den Wert einfach direkt festlegen:

Für Optionsfelder und Kontrollkästchen setzen Sie „Kontrollkästchen“ einfach auf „Wahr“ oder „Falsch“.

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

HTML5-Steuerelemente

HTML5 hat eine große Anzahl von Standardsteuerelementen hinzugefügt, zu den häufig verwendeten gehören Datum, Datum/Uhrzeit, Datum/Uhrzeit-lokal, Farbe, usw., sie alle verwenden das -Tag:

Browser, die HTML5 nicht unterstützen, können die neuen Steuerelemente nicht erkennen und zeigen sie als type="text" an. Browser, die HTML5 unterstützen, erhalten die formatierte Zeichenfolge. Beispielsweise ist der Wert einer Eingabe vom Typ „Datum“ garantiert ein gültiges Datum im Format JJJJ-MM-TT oder eine leere Zeichenfolge.

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">

Senden Sie das Formular

Schließlich kann JavaScript die Formularübermittlung auf zwei Arten verarbeiten (die AJAX-Methode wird später eingeführt). Die erste Methode besteht darin, ein Formular über die Methode „submit()“ des Elements

zu senden. Senden Sie das Formular beispielsweise als Reaktion auf ein

Der Nachteil dieser Methode besteht darin, dass sie die normale Übermittlung des Formulars durch den Browser stört. Standardmäßig sendet der Browser das Formular, wenn er auf klickt oder der Benutzer im letzten Eingabefeld die Eingabetaste drückt. Daher besteht die zweite Möglichkeit darin, auf das onsubmit-Ereignis von zu reagieren und beim Absenden des Formulars Änderungen vorzunehmen:

<!-- HTML -->
<form id="test-form">
  <input type="text" name="test">
  <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 提交form:
  form.submit();
}
</script>

Beachten Sie, dass Sie „true“ zurückgeben müssen, um den Browser anzuweisen, mit dem Absenden fortzufahren Wenn Sie „false“ zurückgeben, wird der Browser das Formular nicht weiter senden. Diese Situation entspricht normalerweise dem Benutzereingabefehler, der den Benutzer zu einer

Fehlermeldung

auffordert und dann die Übermittlung des Formulars abbricht.

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
  <input type="text" name="test">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 继续下一步:
  return true;
}
</script>

Wenn Sie überprüfen und ändern, nutzen Sie vollständig aus, um Daten zu übergeben. Viele Login-Formulare erwarten beispielsweise, dass Benutzer ihren Benutzernamen und ihr Passwort eingeben. Aus Sicherheitsgründen wird beim Absenden des Formulars jedoch nicht das Klartext-Passwort übermittelt, sondern der MD5 des Passworts. Gewöhnliche JavaScript-Entwickler ändern direkt:

Dieser Ansatz scheint in Ordnung zu sein, aber wenn der Benutzer das Passwort eingibt und übermittelt, ändert sich die Anzeige des Passwortfelds plötzlich von mehreren * auf 32 * (da MD5 32 Zeichen hat).

要想不改变用户的输入，可以利用实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="input-password">
  <input type="hidden" id="md5-password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var input_pwd = document.getElementById('input-password');
  var md5_pwd = document.getElementById('md5-password');
  // 把用户输入的明文变为MD5:
  md5_pwd.value = toMD5(input_pwd.value);
  // 继续下一步:
  return true;
}
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用history让ajax支持前进/后退/刷新

原生ajax与封装的ajax使用方法（附代码）

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