Maison > Article > interface Web > 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]]?"":(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]]?"":(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.