`
didxga
  • 浏览: 11947 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

serializeObject——序列化Form表单到一个对象

阅读更多
转贴danheberden的代码
下面的代码能够将Form表单的值转化成一个Javascript对象,觉得在构建Form表单值的对象时代码实现上比较好,故转贴分享一下.
/* 
* .serializeObject (c) Dan Heberden
* danheberden.com
* 
* Gives you a pretty object for your form elements
*/
(function($){
  $.fn.serializeObject = function() {
    if ( !this.length ) { return false; }

    var $el = this,
      data = {},
      lookup = data; //current reference of data

      $el.find(':input[type!="checkbox"][type!="radio"], input:checked').each(function() {
        // data[a][b] becomes [ data, a, b ]
        var named = this.name.replace(/\[([^\]]+)?\]/g, ',$1').split(','),
            cap = named.length - 1,
            i = 0;

        for ( ; i < cap; i++ ) {
            // move down the tree - create objects or array if necessary
            lookup = lookup[ named[i] ] = lookup[ named[i] ] ||
                ( named[i+1] == "" ? [] : {} );
        }

        // at the end, psuh or assign the value
        if ( lookup.length != undefined ) {
             lookup.push( $(this).val() );
        }else {
              lookup[ named[ cap ] ]  = $(this).val();
        }

        // assign the reference back to root
        lookup = data;
      });

    return data;
  };
})(jQuery);

实例
<div id="test">
    <input name="text1" value="txt-one" />
    <input type="checkbox" name="top[child][]" value="1" checked="checked" />
    <input type="checkbox" name="top[child][]" value="2" checked="checked" />
    <input type="checkbox" name="top[child][]" value="3" checked="checked" />
    
    <select name="another[select]">
        <option value="opt"></option>
    </select>
</div>

$( '#test' ).serializeObject();

Returns

{ text1: "txt-one",
  top: {
    child: [ "1", "2", "3" ]
  },
  another: {
    select: "opt"
  }
}
分享到:
评论

相关推荐

    jQuery序列化form表单数据为JSON对象的实现方法

    本文将介绍如何利用jQuery序列化form表单数据为JSON对象的实现方法,并提供实例代码来加深理解。 在Web开发中,表单提交是一个常见的操作,通常需要把表单中的数据转换成适合网络传输的格式。HTML表单通过表单元素...

    jquery.serializeObject:创建表单元素的序列化表示

    `jquery.serializeObject`是一个插件,它扩展了jQuery的核心功能,允许开发者将表单元素的数据序列化为JSON对象,方便进一步处理和传输。这个功能在现代Web应用中非常关键,因为它使得动态数据的收集和发送变得更加...

    serializeObject:这个jQuery插件将序列化数组数据映射到JSON对象

    serializeObject 该jquery插件会将序列化的表单数据数组映射到JSON Object。相依性库。开始导入库。 导入插件。首次使用 $( "form" ).serializeObject();二次使用 var rFormat = {id: 0,name: "John Doe"};$( "form...

    基于jQuery的一个扩展form序列化到json对象

    总结来说,虽然jQuery本身不提供表单到JSON序列化的直接支持,但是通过结合serializeArray()方法、动态对象属性处理、以及自定义的序列化函数,我们可以实现这一功能。对于嵌套对象的处理特别需要注意属性名的分割和...

    jQuery将表单序列化成一个Object对象的实例

    标题提到的"jQuery将表单序列化成一个Object对象的实例",主要涉及到jQuery的`serializeArray()`方法和自定义扩展功能,以适应开发者对于更方便的数据结构的需求。 `serializeArray()`是jQuery提供的一个方法,用于...

    jquery form表单序列化为对象的示例代码

    为了将表单数据以对象的形式传输到服务器,我们常常需要对表单元素进行序列化操作。jQuery库作为一个广泛使用的JavaScript库,提供了方便的方法来简化这一过程。本文将介绍如何使用jQuery来序列化表单为对象形式。 ...

    前端项目-jQuery.serializeObject.zip

    在前端开发中,数据的序列化是一个非常关键的步骤,特别是在表单提交或者与服务器进行交互时。`jQuery.serializeObject` 是一个非常实用的 jQuery 插件,它能够将 HTML 表单的数据转换成 JSON 格式,方便我们处理和...

    c#模拟post发送json和multipart/form-data格式

    要将一个C#对象序列化为JSON字符串,可以使用`JsonConvert.SerializeObject()`方法;反序列化则使用`JsonConvert.DeserializeObject()`。 例如: ```csharp using Newtonsoft.Json; public class User { public ...

    前端项目-jquery-serialize-object.zip

    本项目"前端项目-jquery-serialize-object"关注的是使用jQuery来序列化表单字段,将它们转换为JavaScript对象或JSON格式,这在提交表单数据到服务器时尤其有用。下面我们将深入探讨这一主题。 1. **jQuery 序列化...

    c#下post multipart/form-data和JSON

    1. 序列化对象为JSON:首先,定义一个C#对象,然后使用Json.NET的`JsonConvert.SerializeObject`方法将其转换为JSON字符串。 ```csharp public class MyData { public string Field1 { get; set; } public int ...

    jQuery序列化表单成对象的简单实现

    在使用easyui的datagrid组件时,在查询时传递的查询参数是对象类型,为了方便,扩展了jquery中的序列化方法,调用该方法,可以将表单的所有数据序列化 $.fn.serializeObject=function(){ var obj=new Object(); ...

    jQuery序列化后的表单值转换成Json

    为了将序列化后的表单值转换为JSON,我们可以自定义一个jQuery扩展函数,如`serializeObject()`。这个函数的作用是遍历`serializeArray()`返回的数组,并将其构建为一个JSON对象。以下是一个实现这个功能的示例代码...

    c#post multipart/form-data和JSON数据

    首先,需要创建一个MultipartFormDataContent对象,然后添加键值对或文件流。例如: ```csharp using System.Net.Http; using System.IO; var client = new HttpClient(); var content = new ...

    jQuery json

    4. **序列化表单数据为JSON**:jQuery提供`serializeArray()`和`serializeObject()`(非官方插件)方法将表单数据转换为JSON格式,便于发送Ajax请求: ```javascript var formData = $('form').serializeArray();...

    jquery ajax在asp.net中的应用

    // 获取并序列化电话簿数据 return JsonConvert.SerializeObject(phoneBook); } } ``` 在我们的电话簿案例中,客户端可能有一个简单的HTML表单,使用`jQuery.validate`插件进行表单验证。`jQuery.validate`...

Global site tag (gtag.js) - Google Analytics