Explication détaillée de la méthode originale et de la méthode améliorée d'obtention des données de formulaire en javascript-js tutoriel-php.cn

Explication détaillée de la méthode originale et de la méthode améliorée d'obtention des données de formulaire en javascript

伊谢尔伦

Libérer： 2017-07-22 10:05:12

original

998 Les gens l'ont consulté

Quiconque a été en contact avec Angularjs sait que ng prend en charge la liaison bidirectionnelle. Nous pouvons facilement lier nos valeurs à l'interface via ngModel. Lorsque la valeur est modifiée et que le formulaire est soumis, il y a. pas besoin de retransmettre l’ID. Reprenons les informations de la zone de saisie. Ainsi, lorsque nous développons le site Web frontal, nous n'utilisons pas de frameworks MVVM tels que ng, et faisons uniquement référence à Jquery. Alors, que devons-nous faire lors du traitement des formulaires.

1. Approche originale

<p id="form">
  <select id=&#39;select1&#39;>
   <option value="">--请选择--</option>
   <option value="1">--1--</option>
   <option value="2">--2--</option>
   <option value="3">--3--</option>
  </select>
  <input id=&#39;radio1&#39; type="radio" />
  <input id=&#39;text1&#39; type="text" />
  <textarea id=&#39;textArea1&#39; ></textarea>
</p

Copier après la connexion

Le programmeur A dira : Si simple, obtenez simplement la valeur de chaque zone de saisie via l'identifiant Jquery. Comme c'est simple.

function getEntity(){
  return {
    select1:$("#select1").val(),
    radio1:$("#radio1").prop(&#39;checked&#39;),
    text1:$("text1").val(),
    textArea1:$("textArea1").val()
  }
}

Copier après la connexion

2. Méthode de mise à niveau.

Le programmeur B a déclaré que cela ne fonctionnerait pas. De nombreuses pages contiennent des soumissions de formulaires, qui n'ont pas besoin d'être utilisées. partout, Jquery est utilisé pour obtenir la valeur. Si une zone de saisie est ajoutée dans le futur, chaque fois que le HTML est modifié, le JS correspondant doit être modifié, ce qui est très gênant. Le programmeur paresseux B a donc pensé à un moyen de le faire via des balises personnalisées.

2.1 Nous emballons le formulaire sous p d'un formulaire et ajoutons un attribut de champ de données à chaque contrôle d'entrée. Dans le champ de données, écrivons le nom de l'attribut de l'entité construite, en tenant compte des objets imbriqués. apparaîtra. Par conséquent, les noms d'attribut dans le champ de données sont séparés par des points. Par exemple, data-field='Person.Name' construira { Person:{ Name:xxx }}. Voici un exemple d'objet sans imbrication<. 🎜>

<p id="form">
    <select data-field=&#39;select1&#39;>
     <option value="">--请选择--</option>
     <option value="1">--1--</option>
     <option value="2">--2--</option>
     <option value="3">--3--</option>
    </select>
    <input data-field=&#39;radio1&#39; type="radio" />
    <input data-field=&#39;text1&#39; type="text" />
    <textarea data-field=&#39;textArea1&#39;></textarea>
 </p>

Copier après la connexion

2.2 Fournissez une méthode getEntity. Lisez le formulaire externe et recherchez tous les attributs du champ de données à parcourir. Étant donné que la zone de saisie comporte une case à cocher et une radio, saisissez et sélectionnez, la valeur est d'abord supprimée lors du jugement du type. Appelez ensuite la méthode getField pour créer l’entité. Le code ne sera pas expliqué en détail. Tout le monde devrait pouvoir le comprendre. Je voulais juste exprimer mes pensées.

function getEntity(form) {
   var result = {};
   $(form).find("[data-field]").each(function() {
     var field = $(this).attr("data-field");
     var val;
 
     if ($(this).attr(&#39;type&#39;) == &#39;checkbox&#39;) {
       val = $(this).prop(&#39;checked&#39;);
     } else if ($(this).attr(&#39;type&#39;) == &#39;radio&#39;) {
       val = $(this).prop(&#39;checked&#39;);
     } else {
       val = $(this).val();
     }
     // 获取单个属性的值,并扩展到result对象里面
     getField(field.split(&#39;.&#39;), val, result);
   });
   return result;
 }

function getField(fieldNames, value, result) {
  if (fieldNames.length > 1) {
    for (var i = 0; i < fieldNames.length - 1; i++) {
      if (result[fieldNames[i]] == undefined) {
        result[fieldNames[i]] = {}
      }
      result = result[fieldNames[i]];
    }
    result[fieldNames[fieldNames.length - 1]] = value;
  } else {
    result[fieldNames[0]] = value;
  }
}

Copier après la connexion

Regardons les objets imbriqués

<p id="form">
    <select data-field=&#39;Person.Job&#39;>
     <option value="">--职位--</option>
     <option value="java工程师">java工程师</option>
     <option value="net工程师">.net工程师</option>
     <option value="python工程师">python工程师</option>
    </select>
    <input data-field=&#39;Person.Desc&#39; type="text" />
  </p>

Copier après la connexion

2.5 fournit une méthode pour obtenir des entités, bien sûr , il faut également fournir une méthode d'affectation. Jetons un coup d'œil à la méthode d'affectation

function setEntity(form, entity) {
  $(form).find("[data-field]").each(function() {
    var field = $(this).attr("data-field");
    fieldNames = field.split(&#39;.&#39;);
    var value = JSON.parse(JSON.stringify(entity));
    for (var index = 0; index < fieldNames.length; index++) {
      value = value[fieldNames[index]];
      if (!value) {
        break;
      }
    }
    if ($(this).attr("type") === "checkbox" ||
      $(this).attr("type") === "radio") {
      $(this).attr(&#39;checked&#39;, Boolean(value));
    } else {
      if (value) {
        $(this).val(value);
      } else {
        $(this).val("");
      }
    }
  })
}

Copier après la connexion

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!