javascript formData 遍历问题

Question

var form = new FormData($("form").get(0));
  var ent = form.entries();
  var data = {};
  while(item = ent.next()){
    if(item.done) break;
    item.value[1] && (data[item.value[0]] = item.value[1]);
}

这是能遍历的办法，一般高版本浏览器能使用，如谷歌，火狐等，但在IE 中entries并不存在，而且FormData仅能使用 append 方法，请问还能遍历FormData的数据吗？

Answer 1

这个函数可以序列化form 是红宝书上的

var serializeForm=function(form){
        var parts=[],
            field=null,
            i,
            len,
            j,
            optLen,
            option,
            optValue;
        for(i = 0, len = form.elements.length;i<len;i++){
            field=form.elements[i];
            switch (field.type){
                case 'select-one':
                case 'select-multiple':
                    if(field.name.length){
                        for(j=0,optLen=field.options.length;j<optLen;j++){
                            option=field.options[j];
                            if(option.selected){
                                optValue='';
                                if(option.hasAttribute){
                                    optValue=(option.hasAttribute('value')?option.value:option.text);
                                } else {
                                    optValue=(option.attributes['value'].specified?option.value:option.text);
                                }
                                parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optValue));
                            }
                        }
                    }
                    break;
                case undefined: //字段集
                case 'file':
                case 'submit':
                case 'reset':
                case 'button':
                    break;
                case 'radio':
                case 'checkbox':
                    if(!field.checked){
                        break;
                    }
                default :
                    if(field.name.length){
                        parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
                    }
            }
        }
        return parts.join('&');
    }

Answer 2

   var _FormData= window.FormData,FormData = function(dom){
        var fd = new _FormData(dom);
        fd.document = dom;
        fd.__proto__.entries = function(){
            fd.data = serializeForm(this.document);
            return this;
        }
        fd.__proto__.next = function(){
            var o = fd.data.shift();
            return {done:!o,value:!!o ? o.concat() : []};
        }
        function serializeForm(form) {
                var parts = [],
                    field = null,
                    i,
                    len,
                    j,
                    optLen,
                    option,
                    optValue;
                for (i = 0, len = form.elements.length; i < len; i++) {
                    field = form.elements[i];
                    switch (field.type) {
                        case 'select-one':
                        case 'select-multiple':
                            if (field.name.length) {
                                for (j = 0, optLen = field.options.length; j < optLen; j++) {
                                    option = field.options[j];
                                    if (option.selected) {
                                        optValue = '';
                                        if (option.hasAttribute) {
                                            optValue = (option.hasAttribute('value') ? option.value : option.text);
                                        } else {
                                            optValue = (option.attributes['value'].specified ? option.value : option.text);
                                        }
                                        parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optValue));
                                    }
                                }
                            }
                            break;
                        case undefined:
                        case 'file':
                        case 'submit':
                        case 'reset':
                        case 'button':
                            break;
                        case 'radio':
                        case 'checkbox':
                            if (!field.checked) {
                                break;
                            }
                        default :
                            if (field.name.length) {
                                parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
                            }
                    }
                }

                //返回对象
                var res = [];
                for(key in parts){
                    var sp = parts[key].split("=");
                    sp[1] && (res.push([sp[0],sp[1]]));
                }
                return res;
            }
        return fd;
    }

    function check(){
        var form = new FormData($("#YS").get(0));
        var ent = form.entries();
        var data = {};
        while (item = ent.next()) {
            if (item.done) break;
            item.value[1] && (data[item.value[0]] = item.value[1]);
        }
        return data;
    }

    check();

这样等于自己实现了功能，也是可以的

Answer 3

这个属于兼容性的问题。可以看这个页面的兼容性表格。
https://developer.mozilla.org...

Answer 4

果然还是 IE 比较奇葩。
如果用 jQuery 的话，可以用 jQuery 的 serializeObject 插件 得到一个包含键值对的对象