zoukankan      html  css  js  c++  java
  • jQuery序列化表单 serialize() serializeArray()

    1、serialize()方法

    描述:序列化表单内容为字符串,用于Ajax请求。

    格式:var data = $("form").serialize();

    2.serializeArray()方法

    描述:序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。

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

    格式:var jsonData = $("form").serializeArray();

    在使用ajax提交表单数据时,以上两种方法都可以将data参数设置为$("form").serialize()或$("form").serializeArray()

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

    想看二者的区别,可以参考 http://blog.csdn.net/itmyhome1990/article/details/41866265

    自己最后写了一个方法,序列化数组,转化成json对象

    function serializeArrayToObject(formId){
    var serializeArray = $("#"+formId+"").serializeArray();
    var goalObj = {};
    $.each(serializeArray, function(index,item) {
    goalObj[item.name] = item.value;
    });
    return goalObj;
    }
  • 相关阅读:
    虚拟DOM和diff算法
    面向对象之封装
    面向对象之类和函数的属性
    面向对象之__init__方法
    面向对象之初始类和对象
    面向对象与面向过程详解
    CSS高级技巧
    CSS定位
    模块之re模块详解
    模块之logging模块详解
  • 原文地址:https://www.cnblogs.com/shj-com/p/7640131.html
Copyright © 2011-2022 走看看