Question

我使用以下函数将表单序列化为json对象。

   $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

它返回结果如下：

{
"address": "aaaa",
"organization": "66",
"region": "44",
"nodeType": "HANGING",
"description": "asdasdasdasd",
"longitude": "45.8888",
"latitude": "45.8888"
}

但我需要一些不同的结果。我需要将我的选择选项作为包含id值的对象发送。我怎么能用javascript函数来做呢？

{
    "address": "",
    "description": "aaa",
    "nodeType": {
        "idNodeType": "WELL"
    },
    "region": {
        "idRegion": "56"
    },
    "organization": {
        "idOrganization": "66"
    },
    "location": {
        "latitude": "46.234234",
        "longitude": "45.23423"
    }
}

Answer 1

有几种方法可以实现这一点，我可以想出来。我将向您展示一些结合了三个的代码，以便您可以选择您喜欢的代码。在所有情况下，我们都是在serializeObject方法中应用值之前在对象中创建路径。为此，我添加了一个递归的私有方法来完成它。解决了这个问题后，唯一的问题是如何确定价值的最终路径，我发现了三种不同的方式：

使用所需路径编写输入名称，如：
```
<input name="some.path" />
```
使用对象中的属性来构成路径。我在我的示例中使用了data- *属性，但您可以轻松更改为使用id。例如，这将导致在JSON对象中映射region-＆gt; idRegion：
```
<select name="region" data-form-path="idRegion">
```

创建映射对象以确定如何将输入名称映射到对象路径，例如：

var mapping = {
    "country" : "location.country",
    "isForeignCountry" : "location.isForeignCountry"
}

因此，这是一个示例表单，我们可以用它来演示它的各种工作方式：

     <form>
        <input type="text" name="name" value="1"/>
        <input type="text" name="lasntame" value="2"/>
        <input type="text" name="photos.total" value="2"/>
        <input type="text" name="photo.items" value="face.jpg" id="b"/>
        <input type="text" name="photo.items" value="landscape.jpg" id="b"/>            
        <textarea name="userData.comments" data-form-path="1355998"></textarea>
        <select name="region" data-form-path="idRegion">
            <option value="5" selected="selected">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
        <select name="country" >
            <option value="5" selected="selected">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
        <input type="checkbox" checked="checked" name="isForeignCountry" value="8" id="f">
        <input type="submit" name="check" value="Submit" id="g">
    </form>

正如您所看到的，我们有一些名为＆＃39; photos.total＆＃39;和＆＃39; photos.items＆＃39;。有两个＆＃39;项目＆＃39;所以你可以看到多个值的字段仍然可以正确转换。这些使用第一种方法映射到最终值路径。

我们还有两个带有data-form-path属性的项（顺便说一下，HTML5有效数据 - *属性）。这些将使用第二种方法，对于奖励积分，textarea在名称中有一个路径，因此它也使用第一种方法。

将会发挥作用的修改后的代码如下：

    $.fn.serializeObject = function(mapping)
    {
            var o = {};
            var a = this.serializeArray();
            var that = this;
            $.each(a, function() {
                var name = this.name;
                // We store current reference in a variable because when a nested path 
                // is created, the value is set on the last element of the path, 
                // instead of the JSON root 
                var currentRef = o;

                if(!mapping) {
                  // 1st way: using names with path, like 'inputname="location.latitude" '
                  if(name.indexOf('.') != -1) {
                    var path = name.split('.');
                    currentRef = createPath(o, path);
                    name = name.split('.').splice(-1,1);
                  }

                  // Second way: adding metadata (this could be simply the id instead)
                  // Bonus! supports also paths with dots
                  var idData = $("*[name='" + this.name + "']",that).data("form-path");
                  if(idData){
                    currentRef = createPath(currentRef, [name,idData]);
                    name = idData;
                  }
                }
                else {
                  // Final way: simply use a mapping between form inputs and json path
                  if(mapping[name]){                
                    var path = mapping[name].split('.');
                    currentRef = createPath(o, path);                
                    name = name.split('.').splice(-1,1);
                  }
                }

                if (currentRef[name] !== undefined) {
                    if (!currentRef[name].push) {
                        currentRef[name] = [currentRef[name]];
                    }
                    currentRef[name].push(this.value || '');
                } else {
                    currentRef[name] = this.value || '';
                }
            });

            // Recursively create a path in the obj item and return
            // the last created object reference
            function createPath(obj, pathArray) {
                var item = pathArray.splice(0,1);
                var returnObj;

                if(pathArray.length === 0) {
                    returnObj = obj;
                }
                else if(!obj[item]) {
                    obj[item] = {};
                    returnObj = createPath(obj[item], pathArray);
                }
                else returnObj = createPath(obj[item], pathArray);

                return returnObj;
            }

            return o;
    };

现在，如果我们在没有映射的情况下进行调用，则此表单的结果为：

    {
        "name":"1",
        "lasntame":"2",
        "photo":{
            "total":"2",
            "items":[
                "face.jpg",
                "landscape.jpg"]
        }
        ,"userData":{
            "comments":{
                "1355998":""
            }
        },
        "region":{
            "idRegion":"5"
        },
        "country":"5",
        "isForeignCountry":"8"
    }

输入名称＆＃34;照片。*＆＃34;已被放入与其姓名相对应的路径中。并且data-form-path属性的输入也正确缩进。

如果修改HTML不是一个选项（并且让我说你在询问时需要更具体！），你可以使用输入映射对象。所以，如果我这样打电话：

    var mapping = {
        "country" : "location.country",
        "isForeignCountry" : "location.isForeignCountry"
    }
    console.log( $("form").serializeObject(mapping) );

使用对象映射而不是其他规则，导致：

    {
        "name":"1",
        "lasntame":"2",
        "photo.total":"2",
        "photo.items":[
            "face.jpg",
            "landscape.jpg"],
        "userData.comments":"",
        "region":"5",
        "location":{
            "country":"5",
            "isForeignCountry":"8"
        }
    }

我想这应该可以满足您的需求。我希望您提出更多详细信息，例如显示您的HTML并解释您可以或不可以更改的内容。如果这有助于你，请告诉我。干杯！

Javascript将表单序列化为JSON

1 个答案: