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