Verarbeitung der Konvertierung von Formularserialisierungstypdaten in Objekte basierend auf JavaScript (wodurch Objekte Objekte enthalten können)_Javascript-Kenntnisse

Die Form der Serialisierungstypdaten bezieht sich auf das Format der von der URL übergebenen Daten, bei denen es sich um ein Schlüssel/Wert-Paar in der Form „Schlüssel=Wert&Schlüssel=Wert&Schlüssel=Wert“ handelt. Im Allgemeinen kann dieser Effekt mit der Funktion $.fn.serialize von jQuery erzielt werden. Wie konvertiert man ein solches Format in ein Objekt?

Wir wissen, dass die Verwendung der Funktion $.fn.serializeArray von jQuery ein Objekt mit der folgenden Struktur erhält

[
  {
    name: "startTime"
    value: "2015-12-02 00:00:00"
  },
  {
    name: "endTime"
    value: "2015-12-25 23:59:59"
  }
]

Dies ist ein Objektarray, aber manchmal möchten wir ein Objekt mit der folgenden Struktur erhalten

{
  "startTime": "2015-12-02 00:00:00"
  "endTime": "2015-12-25 23:59:59"
}

Hier ist also eine Konvertierungsfunktion erforderlich.

Die Verarbeitungsschritte sind wie folgt:

1. Verwenden Sie „&“, um jedes Schlüssel-Wert-Paar zu trennen und durchlaufen Sie dann jedes Schlüssel-Wert-Paar

  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //处理每一个键值对
    evalThem(properties[i]);
  }; 

2. Trennen Sie die angegebenen Schlüssel-Wert-Paare vom Symbol „=“ und analysieren Sie mit decodeURIComponent die Codierung der URI-Komponente für jeden Schlüssel und Wert (da die von der URL übergebenen serialisierten Daten im Allgemeinen von der URI-Komponente codiert werden).

    var strAry = new Array();
    strAry = str.split("=");
    //使用decodeURIComponent解析uri 组件编码
    for(var i = 0; i < strAry.length; i++){
      strAry[i] = decodeURIComponent(strAry[i]);
    }
    var attributeName = strAry[0];
    var attributeValue = strAry[1].trim(); 

3. Wenn der Wert das Symbol „=" enthält, ist eine zusätzliche Verarbeitung (Wertzusammenführung) erforderlich.                           

 if(strAry.length > 2){
      for(var i = 2;i<strAry.length;i++){
        attributeValue += "="+strAry[i].trim();
      }
    } 

Hier gibt es einen Prozess, das heißt, wenn der Wert nicht vorhanden ist, wird er nicht zum endgültigen Objekt hinzugefügt. Sie können je nach Ihrer Situation wählen, ob Sie diesen Code löschen möchten oder nicht

   if(!attributeValue){
      return ;
    } 

4. Wenn der Schlüssel „obj.obj.obj“ ist und durch ein „.“-Symbol verknüpft ist, muss er als Objekt behandelt werden, das ein Objekt enthält. Die Verarbeitungsmethode besteht darin, den Schlüssel durch „.“ zu zerlegen und dann zu prüfen, ob das temporäre Objekt obj bereits das zerlegte Objekt enthält. Wenn ja, hängen Sie die Daten an das vorhandene Objekt an. Der Quellcode lautet wie folgt

 var attriNames = attributeName.split("."),
      curObj = obj;
    for(var i = 0; i < (attriNames.length - 1); i++){
      curObj[attriNames[i]]&#63;"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    curObj[attriNames[i]] = attributeValue.trim(); 

Hier sehen wir, dass der Aufgabenteil im Internet auf diese Weise gehandhabt wird

eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";"); 

Dies ist sehr problematisch. Zum einen kann das Problem, dass Objekte in den 4 Objekten Objekte enthalten, nicht richtig behandelt werden (insbesondere, wenn zwei Elemente dasselbe übergeordnete Objekt haben, z. B. „test.id=1&test.name='chua‘). ") besitzt den übergeordneten Objekttest). Das andere ist, dass der Wert attributeValue nicht korrekt verarbeitet werden kann, wenn er einfache oder doppelte Anführungszeichen enthält. Daher ist die Verwendung der Zuweisung „=“ am sichersten.

Der endgültige vollständige Quellcode lautet also wie folgt

/*
serializedParams格式为"key1=value1&key2=value2". 
也支持'key.sonkey=value' 
 */
function paramString2obj (serializedParams) {  
  var obj={};
  function evalThem (str) {
    var strAry = new Array();
    strAry = str.split("=");
    //使用decodeURIComponent解析uri 组件编码
    for(var i = 0; i < strAry.length; i++){
      strAry[i] = decodeURIComponent(strAry[i]);
    }
    var attributeName = strAry[0];
    var attributeValue = strAry[1].trim();
    //如果值中包含"="符号，需要合并值
    if(strAry.length > 2){
      for(var i = 2;i<strAry.length;i++){
        attributeValue += "="+strAry[i].trim();
      }
    }
    if(!attributeValue){
      return ;
    }
    var attriNames = attributeName.split("."),
      curObj = obj;
    for(var i = 0; i < (attriNames.length - 1); i++){
      curObj[attriNames[i]]&#63;"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    //使用赋值方式obj[attributeName] = attributeValue.trim();替换
    //eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";");
    //解决值attributeValue中包含单引号、双引号时无法处理的问题
    curObj[attriNames[i]] = attributeValue.trim();
  };
  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //处理每一个键值对
    evalThem(properties[i]);
  };
  return obj;
}

Der obige Inhalt basiert auf der JavaScript-Verarbeitung zum Konvertieren von Formularserialisierungsdaten in Objekte (Objekte dürfen Objekte enthalten). Ich hoffe, dass das Teilen dieses Artikels für alle hilfreich sein kann.