在开发中有时需要在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. 【转】MFC 自定义edit 限制输入十六进制内容 响应复制粘贴全选剪切的功能

    参考地址:MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能   Ctrl组合键ASCII码 ^Z代表Ctrl+z                     ASCII值 控制字符  AS ...

  2. A7. JVM 垃圾回收收集器(GC 收集器)

    [概述] 如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体实现.Java 虚拟机规范中对垃圾收集器应该如何实现没有任何规定,因此不同的厂商.不同版本的虚拟机所提供的垃圾处理器都可能会 ...

  3. IIS添加更改默认页面

    服务器中打开IIS管理器,选择默认文档,双击即可进入编辑:

  4. mongodb的安装与简单操作

    MongoDB中文社区:http://www.mongoing.com     数据库的使用场景 SQL(关系型数据库):MySQL.SQLServer  --->磁盘操作 1.高度事务性的场景 ...

  5. 树莓派 -- i2c学习 续(1) DeviceTree Overlay实例化rtc

    上文中讨论了通过sysfs来实例化i2c设备 (rtc ds3231) https://blog.csdn.net/feiwatson/article/details/81048616 本文继续看看如 ...

  6. 在rubymine中集成heroku插件

    先安装heroku,参见http://www.cnblogs.com/jecyhw/p/4906990.html Heroku安装之后,就自动安装上git,目录为C:\Program Files (x ...

  7. 【02】HTML5与CSS3基础教程(第8版)(全)

    [02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth cast ...

  8. Django组件:(6)cookie 和 session

    会话:会话可理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应:在JavaWeb中,客户向某一服务器发出第一个请求开始,会话就开始了,直到客户关闭了浏览器会话结束. 在一个会话的 ...

  9. 【ZJOI2017 Round1练习&BZOJ4773】D3T1 cycle(最小负环,倍增)

    题意:给定一个带权有向图,求点数最小的负环. 2 ⩽ n ⩽ 3000 ⩽ m ⩽ n(n - 1)1 ⩽ ui,vi ⩽ nabs(w[j])<= 10^4 思路:倍增思想 设d[i,j,k] ...

  10. 整体二分初识--POJ2104:K-th Number

    n<=100000个数有m<=5000个询问,每次问区间第k大. 方法一:主席树!…… 方法二:整体二分. 整体二分一次性计算半个值域对一个区间的询问的贡献,然后根据“这半边的贡献在某个询 ...