Traitement de conversion des données de type sérialisation de formulaire en objets basés sur JavaScript (permettant aux objets de contenir des objets)_compétences javascript

Les données de type sérialisation du formulaire font référence au format des données transmises par l'URL, qui est une paire clé/valeur sous la forme de "clé=valeur&clé=valeur&clé=valeur". D'une manière générale, cet effet peut être obtenu en utilisant la fonction $.fn.serialize de jQuery. Comment convertir un tel format en objet ?

Nous savons que l'utilisation de la fonction $.fn.serializeArray de jQuery obtient un objet avec la structure suivante

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

Il s'agit d'un tableau d'objets, mais parfois nous voulons obtenir un objet avec la structure suivante

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

Une fonction de conversion est donc nécessaire ici.

Les étapes de traitement sont les suivantes :

1. Utilisez "&" pour séparer chaque paire clé-valeur, puis parcourez chaque paire clé-valeur

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

2. Divisez les paires clé-valeur spécifiées du symbole "=" et utilisez decodeURIComponent pour analyser l'encodage du composant uri pour chaque clé et valeur (car les données sérialisées transmises par l'URL sont généralement codées par le composant uri)

    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. Si la valeur contient le symbole "=", un traitement supplémentaire (fusion de valeurs) est requis.                           

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

Il y a un processus ici, c'est-à-dire que si la valeur n'existe pas, elle ne sera pas ajoutée à l'objet final. Vous pouvez choisir de supprimer ou non ce code selon votre propre situation

   if(!attributeValue){
      return ;
    } 

4. Si la clé est "obj.obj.obj" liée par un symbole ".", elle doit être traitée comme un objet contenant un objet. La méthode de traitement consiste à décomposer la clé via ".", puis à vérifier si l'objet temporaire obj contient déjà l'objet décomposé. Si tel est le cas, ajoutez les données à l'objet existant. Le code source est le suivant

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

On voit ici que la partie affectation est gérée de cette manière sur Internet

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

C'est très problématique. La première est qu'il ne peut pas gérer correctement le problème selon lequel les objets dans les 4 objets contiennent des objets (surtout lorsque deux éléments ont le même objet parent, tel que "test.id=1&test.name='chua'). ") possède le test de l'objet parent). L'autre est que lorsque la valeur attributValue contient des guillemets simples ou doubles, elle ne peut pas être traitée correctement. Donc, utiliser l'affectation "=" est le plus sûr.

Le code source final complet est donc le suivant

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

Le contenu ci-dessus est basé sur le traitement JavaScript de conversion des données de type sérialisation de formulaire en objets (les objets sont autorisés à contenir des objets). J'espère que le partage de cet article pourra être utile à tout le monde.