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:

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

// <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:

// <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:

<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

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

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

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