在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化。

jquery提供的serialize方法能够实现。

$("#searchForm").serialize();

但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

例如以下代码:

<form id="searchForm">
<input name="id" value="123"/>
<input name="cx" value="lklj"/>
</form>
<script type="text/javascript">
console.info($("#searchForm").serialize());
</script>

输出结果是:id=123&cx=lklj

serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象)。

所以就需要提供一个能将form转化为对象的方法。参考自:http://www.cnblogs.com/yeminglong/p/3799282.html

(function(window, $) {
$.fn.serializeJson = function() {
var serializeObj = {};
var array = this.serializeArray();
var str = this.serialize();
$(array).each(
function() {
if (serializeObj[this.name]) {
if ($.isArray(serializeObj[this.name])) {
serializeObj[this.name].push(this.value);
} else {
serializeObj[this.name] = [
serializeObj[this.name], this.value ];
}
} else {
serializeObj[this.name] = this.value;
}
});
return serializeObj;
};
})(window, jQuery);

调用插件:

console.info($("#searchForm").serializeJson());

输出结果:Object {id: "123", cx: "lklj"}

form 表单序列化 serialize的更多相关文章

  1. jquery ajax(5)form表单序列化

    form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...

  2. form表单序列化数据之后,追加额外数据

    form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...

  3. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  4. 原生JS实现表单序列化serialize()

    有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...

  5. jQuery实现form表单序列化转换为json对象功能示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. js将form表单序列化[json字符串、数组、对象]

    1.序列化为字符串 $("#Form").serialize();//name=zhangsan&sex=1&age=20   2.序列化为数组 var formD ...

  7. 将复杂form表单序列化serialize-object.js

    <form class="form-horizontal" role="form" id="myform" action=" ...

  8. form表单序列化serialize-object.js

    <form class="form-horizontal" role="form" id="myform" action=" ...

  9. form表单序列化后的数据转json对象

    function formToJson(){ var data = $("#form").serialize(); data= decodeURIComponent(data,tr ...

随机推荐

  1. PHP流程控制考察点

    php遍历数组的三种方法及各自的区别 php遍历数组的方式主要有三种: for循环 foreach循环 while.list().each()组合循环 其中: for循环只能遍历索引数组,foreac ...

  2. pil - pillow 的版本

    pip install  PIL        python2版本 pip install  pillow      python3版本

  3. java.lang.NoClassDefFoundError: org.springframework.beans.FatalBeanException

    在进行Spring和Hibernate整合的时候遇到了这个问题, 问题描述如下 问题原因?  Spring的Bean的XML配置文件存在错误 解决方法: 正确的配置XML文件,例如下面的代码 < ...

  4. 09Windows编程

    Windows编程 2.1      窗口 Windows应用程序一般都有一个窗口,窗口是运行程序与外界交换信息的界面.一个典型的窗口包括标题栏.最小化按钮.最大/还原按钮.关闭按钮.系统菜单图标.菜 ...

  5. 00PostgreSQL

    PostgreSQL PostgreSQL: The World's Most Advanced Open Source Relational Database;PostgreSQL是一个功能强大的开 ...

  6. js模拟支付宝发送短信验证码&&&&短信倒计时

    html <div class="pwdContent"> <div class="pwdBox"></div> <d ...

  7. Android反编译初步

    网上关于Android反编译的帖子很多,反编译的步骤也是很详细,本文Android反编译参考博客:https://www.cnblogs.com/dhcn/p/7120891.html 而反编译中最主 ...

  8. SqlSever锁及存储过程优化

    SqlSever锁及存储过程优化 SQL server的所有活动都会产生锁.锁定的单元越小,就越能提高并发处理能力,但是管理锁的开销越大.如何找到平衡点,使并发性和性能都可接受是SQL Server的 ...

  9. SVN文件库移植(转)

     SVN文件库移植(转) 分类: 项目管理2013-04-19 11:06 161人阅读 评论(0) 收藏 举报 公司以前用的SVN是安装在windows2003下,用了一年多,现在大家觉得很慢,强烈 ...

  10. JAVA基础——设计模式之单列模式

    一:单例设计模式 Singleton是一种创建型模式,指某个类采用Singleton模式,则在这个类被创建后,只可能产生一个实例供外部访问,并且提供一个全局的访问点. 单例设计模式的特点: 单例类只能 ...