第一百五十九节，封装库--JavaScript，表单序列化结合ajax提交数据

封装库--JavaScript，表单序列化结合ajax提交数据

 

封装库，表单序列化方法

/** xu_lie_biao_dan()方法，表单序列化方法，将自动获取指定表单里面的各项字段name值和value值，无法连缀
 *  参数是要获取指定表单的原生态对象
 *  返回，包含表单数据的对象，如，{表单数据}
 **/
feng_zhuang_ku.prototype.xu_lie_biao_dan = function (form) {
    var parts = {};
            for (var i = 0; i < form.elements.length; i++) {    //根据表单字段长度循环
                var filed = form.elements[i];                   //得到没一项表单的字段
                switch (filed.type) {                           //判断得到字段的属性
                    case undefined:
                    case 'submit':
                    case 'reset':
                    case 'file':
                    case 'button':
                        break;                                   //如果是以上几种的一种直接跳出
                    case 'radio':
                    case 'checkbox':
                        if (!filed.selected) break;              //如果是以上两种，判断是否被勾选，没勾选直接跳出
                    case 'select-one':
                    case 'select-multiple':
                        for (var j = 0; j < filed.options.length; j++) {     //下拉选项
                            var option = filed.options[j];
                            if (option.selected) {
                                var optvalue = '';
                                if (option.hasAttribute) {                   //非ie
                                    optvalue = (option.hasAttribute('value') ? option.value : option.text);             //value值存在取value值，value值不存在取text值
                                } else {  //ie
                                    optvalue = (option.attributes('value').specified ? option.value : option.text);     //value值存在取value值，value值不存在取text值
                                }
                                parts[filed.name] = optvalue;                                                           //如果不是以上情况，将表单字段的name值加上value值，添加到对象
                            }

                        }
                        break;
                    default:
                        parts[filed.name] = filed.value;                                                                //如果不是以上情况，将表单字段的name值加上value值，添加到对象
                }
            }
            return parts;
};

 

表单序列化结合ajax提交数据效果图

 

提交到hj.php，返回

 

前台js

var biaodan = $().xu_lie_biao_dan($('form').sh_jd());   //序列化获取表单数据，返回对象
        $().Ajax({                            //执行Ajax数据传输
            method:'post',                    //post方式发送
            url:'hj.php',                     //发送到hj.php
            data:biaodan,                     //发送内容，序列化获取到的表单对象
            success:function (text) {         //执行回调函数
                alert(text);                  //打印出hj.php接收到的数据
            },
            async:true                        //异步模式
        });

 

hj.php

<?php
  echo 'www.jxiou.com';
  print_r($_POST);
?>