Comment utiliser ajax pour exploiter un formulaire avec JavaScript

Cette fois, je vais vous expliquer JavaScript comment utiliser ajax pour faire fonctionner le formulaire, et quelles sont les précautions pour utiliser ajax pour faire fonctionner le formulaire en JavaScript. cas pratique, jetons un coup d'oeil.

L'utilisation de JavaScript pour faire fonctionner des formulaires est similaire à l'utilisation de DOM, car le formulaire lui-même est également une arborescence DOM.

Cependant, la zone de saisie, la zone déroulante, etc. du formulaire peuvent recevoir des entrées de l'utilisateur. Ainsi, l'utilisation de JavaScript pour faire fonctionner le formulaire peut obtenir le contenu saisi par l'utilisateur ou définir un nouveau contenu pour une entrée. boîte.

Les contrôles de saisie du formulaire HTML incluent principalement les types suivants :

• Texte case , correspondante , utilisée pour saisir du texte

• Boîte de mot de passe, correspondante , utilisée pour saisir le mot de passe ;

• Le bouton radio correspondant , est utilisé pour sélectionner un élément

• Box à cocher, correspondante, utilisée pour sélectionner plusieurs éléments

• Boîte déroulante, correspondante < ;select> ; ;, utilisé pour sélectionner un élément;

• Le texte masqué, correspondant , n'est pas visible par l'utilisateur, mais sera masqué lorsque le formulaire est soumis Le texte est envoyé au serveur.

Obtenir la valeur

Si nous obtenons une référence à un nœud Obtenez la valeur d'entrée utilisateur correspondante :

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

Cette méthode peut être appliquée au texte, au mot de passe, masquée et sélectionnée. Cependant, pour les boutons radio et les cases à cocher, l'attribut value renvoie toujours la valeur prédéfinie du HTML, et ce que nous devons obtenir, c'est en fait si l'utilisateur a "coché" l'option, nous devrions donc utiliser vérifié pour juger :

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

Définir la valeur

La définition de la valeur est similaire à l'obtention de la valeur. Pour le texte, le mot de passe, les masqués et la sélection, définissez simplement la valeur directement :

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

Pour les boutons radio et les cases à cocher, définissez simplement coché sur vrai ou faux.

Contrôles HTML5

HTML5 a ajouté un grand nombre de contrôles standard, les plus couramment utilisés incluent la date, la dateheure, la dateheure-locale, la couleur, etc., ils le sont tous. Utilisez la balise  :

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

Les navigateurs qui ne prennent pas en charge HTML5 ne pourront pas reconnaître les nouveaux contrôles et les afficheront sous la forme type="text". Les navigateurs prenant en charge HTML5 obtiendront la chaîne formatée. Par exemple, la valeur d'une entrée de type="date" est garantie comme étant une date valide au format AAAA-MM-JJ ou une chaîne vide.

Soumettre le formulaire

Enfin, JavaScript peut gérer la soumission de formulaire de deux manières (la méthode AJAX sera introduite plus tard).

La première méthode consiste à soumettre un formulaire via la méthode submit() de l'élément

. Par exemple, en réponse à un événement de clic

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

L'inconvénient de cette méthode est qu'elle perturbe la soumission normale du formulaire par le navigateur. Par défaut, le navigateur soumet le formulaire en cliquant sur

, ou lorsque l'utilisateur appuie sur la touche Entrée dans la dernière zone de saisie. Par conséquent, la deuxième façon consiste à répondre à l'événement onsubmit de lui-même et à apporter des modifications lors de la soumission du formulaire :

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

Notez que vous devez renvoyer true pour indiquer au navigateur de continuer la soumission. Si vous retournez faux, le navigateur Le formulaire ne continuera pas à être soumis. Cette situation correspond généralement à l'erreur de saisie de l'utilisateur, invitant l'utilisateur à message d'erreur puis mettant fin à la soumission du formulaire.

Lors de la vérification et de la modification de , utilisez pleinement pour transmettre les données.

Par exemple, de nombreux formulaires de connexion attendent des utilisateurs qu'ils saisissent leur nom d'utilisateur et leur mot de passe. Cependant, pour des raisons de sécurité, le mot de passe en texte clair n'est pas transmis lors de la soumission du formulaire, mais le MD5 du mot de passe. Les développeurs JavaScript ordinaires modifieront directement  :

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

Cette approche semble correcte, mais lorsque l'utilisateur saisit le mot de passe et le soumet, l'affichage de la zone de mot de passe passe soudainement de plusieurs * à 32. * (car MD5 comporte 32 caractères).

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

<!-- 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使用方法（附代码）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!