javacript序列化表单数据

在前端开发时，用到表单交互的比较多，在我们实现一些异步操作数据时，表单数据的序列化就显得尤为重要了。下面我们一起来看看如何进行序列化。

如，我们在进行提交表单时，地址栏里会显示这样的东东：name=zhangsan&sex=male&phone=55555，这种就叫做序列化。

 

js实现如下:

// 通过表单的name或者id进行序列化

var formData = function(formStr){
        var elements = document.forms[formStr].elements || document.getElementById(formStr).elements,
            len = elements.length,
            i = 0,
            name = value = option = '',
            dataArr = [];
        for(; i < len; i++){
            name = encodeURIComponent(elements[i].name);
            value = encodeURIComponent(elements[i].value);
            switch(elements[i].type){
                case 'radio':
                case 'checkbox':
                    if(elements[i].checked){
                        dataArr.push(name + '=' + value);
                    }
                    break;
                case 'select-one':
                case 'select-multiple':
                    option = elements[i].options;
                    var tempArr = [];
                    for(var j = 0, mlen = option.length; j < mlen; j++){
                        if(option[j].selected){
                            option[j].attributes.value && option[j].attributes.value.specified ?
                            tempArr.push(option[j].value) : tempArr.push(option[j].text); 
                        }
                    }
                    dataArr.push(name + '=' + encodeURIComponent(tempArr.join()));
                    break;
                case 'button':
                case 'reset' :
                case 'submit':
                case 'file'  :
                    break;
                default:
                    dataArr.push(name + '=' + value);
                    break;
            }
        }
        return dataArr.join('&');
    }

//假设用作异步请求的js函数为ajax
var url = formData('myform');
ajax('a.php', url);