Ajax中表单序列化serialize()和serializeArray()的使用

Ajax中表单序列化serialize()和serializeArray()的使用

jqueyr库中集成了完整的ajax兼容套件，其中ajax中提供的大量的方法来实现请求前传参，请求，和请求后要做的事件等，例如：Ajax()可以用来发送完整的异步请求，post(),get()发送简单的异步请求等，
这里主要探讨其中的两个关于表单序列化的方法 比如：serialize()和serializeArray();

serialize() :此方法是将表单序列化为字符串 生成的为url编码的文本字符串

例如：name=xiaoyang&address=zhoukou

  //使用的时候一般通过form表单的id进行序列化例如：
  var form = $("formID").serialize();

serializeArray() : 此方法主要是将表单序列化成 json数据结构数据 也就是json对象 可以对其进行编辑和内容的操作等；

  //使用的时候一般通过form表单的id进行序列化例如：
  var formArray = $("formID").serializeArray();

以如下表单进行举例如下：

<div>
    <table>
        //创建一个表单
        <form id="formId">
            //添加表单元素
            <input type="text" name="start"  value="xioaming">
            <input type="text" name="end"  value="hahha">
            <input type="text" name="mulit" value="dfsf">
            <input type="submit" id="btn" value="提交数据">
        form>
    table>

div>

使用js将表单提交 来查看两种方式有什么不同：

 //引入必要的jquery依赖js 上面已经说过jquery中包含完整的ajax
<script src="/static/jquery.min.js">script>
<script>
    $(document).ready(function () {
        //点击提交按钮 打印两种序列化方式出来的字符串
        $("#btn").click(function () {
            //打印字符串序列化表单
            console.log($("#formId").serialize());
            //打印json数据格式序列化表单
            console.log($("#formId").serializeArray())
        })

        //异步提交不想一个表单一个表单的写传输数据可以直接序列还表单如下：
        $.ajax({
            url:"/demo",
            type:"post",
            data:$("#formId").serialize(),
            success:function (data) {
                //请求完成之后回调函数
            }
        })
    })

script>

打印输出的结果如下：

由此可见 ：
serialize()输出的url编码后的文本字符串 可直接传输
serializeArray()输出的是json数组数据 每个元素代表着每个input元素，里面分别包含name 和value键值对
一般不会直接当作表单数据传输 而是在进行一些元素的操作和设置后转化为一个json对象进行传输
转化为接送对象的方法简单如下：

 //创建一个转化的方法
 function getFormData(formId){

     if(formId){
        //首先获取表单的序列化数组
        var arr = $(formId).serializeArray();
        if(arr && arr.length > 0){
          var b = {};//创建一个空的对象 以便装数组数据
          $.each(arr,function(index,it){//index为数组的下标 it为数组对应的数据对象 
            if(it.value){//判断值是否为空
                if(d[it.name]){//判断值是否有同名的多个数据 
                    d[it.name] = d[it.name] +","+ it.value;

                }else{
                    d[it.name] = it.value;
                }
            }
          })
          return b ; // 返回已经拼装好的对象
        }
     }
     return {};//如果不存在此id则传出一个空的对象
 }



 //以上述数据为例 返回的对象如下
  {"start":"xioaming","end":"hahha","mulit":"dsdf"}

多少不凡、只因不甘
一枚初出茅庐的程序员 渴望结交广大it人士，共谋IT大业！