Ausführliche Erläuterung der ursprünglichen Methode und der aktualisierten Methode zum Abrufen von Formulardaten mithilfe von Javascript-js-Tutorial-php.cn

Ausführliche Erläuterung der ursprünglichen Methode und der aktualisierten Methode zum Abrufen von Formulardaten mithilfe von Javascript

伊谢尔伦

Freigeben： 2017-07-22 10:05:12

Original

1030 Leute haben es durchsucht

Jeder, der mit AngularJS in Kontakt gekommen ist, weiß, dass ng die bidirektionale Bindung unterstützt. Wir können unsere Werte problemlos über ngModel an die Schnittstelle binden Es ist nicht erforderlich, die ID erneut zu übergeben. Erfassen wir die Informationen des Eingabefelds erneut. Wenn wir also die Front-End-Website entwickeln, verwenden wir keine MVVM-Frameworks wie ng und verweisen nur auf Jquery. Was sollten wir also bei der Verarbeitung von Formularen tun?

1. Ursprünglicher Ansatz

<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

Nach dem Login kopieren

Programmierer A wird sagen: So einfach, holen Sie sich einfach den Wert jedes Eingabefelds über die JQuery-ID. Wie einfach.

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

Nach dem Login kopieren

2. Upgrade-Methode

Viele Seiten verfügen über Formulareinreichungen, die nicht verwendet werden müssen Überall wird Jquery verwendet, um den Wert zu erhalten. Wenn in Zukunft ein Eingabefeld hinzugefügt wird, muss bei jeder Änderung des HTML das entsprechende JS geändert werden, was sehr mühsam ist. Also dachte der faule Programmierer B über eine Möglichkeit nach, dies über benutzerdefinierte Tags zu erreichen.

2.1 Wir packen das Formular unter p eines Formulars und fügen jedem Eingabesteuerelement ein Datenfeldattribut hinzu. Schreiben Sie in das Datenfeld den Attributnamen der erstellten Entität und berücksichtigen Sie dabei die verschachtelten Objekte wird erscheinen. Daher werden die Attributnamen im Datenfeld durch Punkte getrennt. Beispielsweise ergibt data-field='Person.Name' {Person:{ Name:xxx }}. Das Folgende ist ein Beispiel für ein Objekt ohne Verschachtelung 🎜>

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

Nach dem Login kopieren

2.2 Stellen Sie eine getEntity-Methode bereit. Lesen Sie das äußere Formular und suchen Sie dann alle zu durchlaufenden Datenfeldattribute. Da das Eingabefeld über ein Kontrollkästchen und ein Optionsfeld verfügt, wird der Wert bei der Beurteilung des Typs zuerst herausgenommen. Rufen Sie dann die getField-Methode auf, um die Entität zu erstellen. Der Code wird nicht im Detail erklärt. Jeder sollte es verstehen können. Ich wollte nur meine Gedanken äußern.

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;
  }
}

Nach dem Login kopieren

Werfen wir einen Blick auf verschachtelte Objekte

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

Nach dem Login kopieren

2.5 bietet natürlich eine Methode zum Erhalten von Entitäten , müssen wir auch eine Methode zum Zuweisen von Werten bereitstellen. Werfen wir einen Blick auf die Zuweisungsmethode

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("");
      }
    }
  })
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der ursprünglichen Methode und der aktualisierten Methode zum Abrufen von Formulardaten mithilfe von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!