zoukankan      html  css  js  c++  java
  • jQuery.serializeArray() 函数详解

    serializeArray()函数用于序列化一组表单元素,将表单内容编码为一个JavaScript数组

    serializeArray()函数常用于将表单内容序列化为JSON对象,以便于被编码为JSON格式的字符串。

    该函数会将可用于提交的每个表单控件封装成一个Object对象,该对象有name和value属性,对应该表单控件的name和value属性。然后将这些Object对象封装为一个数组并返回。

    该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

    与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serializeArray()函数不会序列化带有name的按钮控件。更多详情请点击这里

    该函数属于jQuery对象(实例)。

    语法

    jQuery 1.2 新增该函数。

    jQueryObject.serializeArray( )

    返回值

    serializeArray()函数的返回值为Array类型,返回将表单元素编码后的JS数组。

    示例&说明

    <form name="myForm" action="http://www.365mini.com" method="post">
        <input name="uid" type="hidden" value="1" />
        <input name="username" type="text" value="张三" />
        <input name="password" type="text" value="123456" />
        <select name="grade" id="grade">
            <option value="1">一年级</option>
            <option value="2">二年级</option>
            <option value="3" selected="selected">三年级</option>
            <option value="4">四年级</option>
            <option value="5">五年级</option>
            <option value="6">六年级</option>
        </select>
        <input name="sex" type="radio" checked="checked" value="1" />男
        <input name="sex" type="radio" value="0" />女
        <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
        <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
        <input name="hobby" type="checkbox" value="3" />羽毛球
        <input name="btn" id="btn" type="button" value="点击" />
    </form>
    

     对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

    var formArray = $("form").serializeArray();
    /* 以下是序列化后的结果数组formArray的内容:
    [
        { name: "uid", value: "1" },
        { name: "username", value: "张三" },
        { name: "password", value: "123456" },
        { name: "grade", value: "3" },
        { name: "sex", value: "1" },
        { name: "hobby", value: "1" },
        { name: "hobby", value: "2" }
    ];
    */
    

     我们也可以直接对部分表单元素进行序列化。

    var result = $(":text, select, :checkbox").serializeArray();
    /* 以下是序列化后的结果数组result的内容:
    [ 
        { name: "username", value: "张三" }, 
        { name: "password", value: "123456" },
        { name: "grade", value: "3" },
        { name: "hobby", value: "1" },
        { name: "hobby", value: "2" }
    ];
    */
    

    serializeArray():

     方法通过序列化表单值来创建对象数组(名称和值)。

    您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

    详细说明

    serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

    注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

    返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

    [ 
      {name: 'firstname', value: 'Hello'}, 
      {name: 'lastname', value: 'World'},
      {name: 'alias'}, // 值为空
    ]
    

      

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        x=$("form").serializeArray();
        $.each(x, function(i, field){
          $("#results").append(field.name + ":" + field.value + " ");
        });
      });
    });
    </script>
    </head>
    <body>
    <form action="">
    First name: <input type="text" name="FirstName" value="Bill" /><br />
    Last name: <input type="text" name="LastName" value="Gates" /><br />
    </form>
    
    <button>序列化表单值</button>
    <div id="results"></div>
    </body>
    </html>
    

      运行结果:

    serialize() :

    定义和用法

    serialize() 方法将表单内容序列化为字符串。

    语法

    .ajaxStop([callback])
    参数描述
    callback 被调用的函数。

    详细说明

    .serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。表单元素有几种类型:

    <form>
    
      <div><input type="text" name="a" value="1" id="a" /></div>
    
      <div><input type="text" name="b" value="2" id="b" /></div>
    
      <div><input type="hidden" name="c" value="3" id="c" /></div>
    
      <div>
    
        <textarea name="d" rows="8" cols="40">4</textarea>
    
      </div>
    
      <div><select name="e">
    
        <option value="5" selected="selected">5</option>
    
        <option value="6">6</option>
    
        <option value="7">7</option>
    
      </select></div>
    
      <div>
    
        <input type="checkbox" name="f" value="8" id="f" />
    
      </div>
    
      <div>
    
        <input type="submit" name="g" value="Submit" id="g" />
    
      </div>
    
    </form>
    

      .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:

    $('form').submit(function() {
    
      alert($(this).serialize());
    
      return false;
    
    })
    

      输出标准的查询字符串:

    a=1&b=2&c=3&d=4&e=5

    注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

  • 相关阅读:
    redis中文API
    基于redis的分布式锁
    redis安装使用配置
    windows常用命令
    curl命令详解
    linux远程连接
    memcache在大型网站的应用策略
    缓存使用的一些注意事项
    记录memcache分布式策略及算法
    U盘安装Centos7.0图解
  • 原文地址:https://www.cnblogs.com/a757956132/p/4318961.html
Copyright © 2011-2022 走看看