在开发中有时需要在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. C++模版完全解析

    模版 模版在C++中是一个很重要的概练,生活中的模版也是随处可见,比如制造工程师会 哪一个模子去构造出一个一个的工件,C++程序员能够用模版去实例化y有相同操作 不同类型的函数或者数据结构.简单的理解 ...

  2. HDU_1542_(树状数组)

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  3. 网络基础编程_5.4聊天室-IOCP服务器

    聊天室-IOCP服务器 main 创建完成端口内核对象(CreateIoCompletionPort) 获取核心数并创建线程(GetSystemInfo + CreateThread) 创建套接字并绑 ...

  4. java_lock锁

    lock锁是一个接口,jdk5.0新增的接口: 在线程中创建一个他的实现类对象Reentrantlock,默认为fals可以改为true,改为true后是有序的 把操作共享资源的代码放入try中,在t ...

  5. Debug:This kind of launch is configured to openthe debug perspective when it解决办法

    http://blog.sina.com.cn/s/blog_7ca3aa020100zlha.html 启动tomcat时,myeclipse报错: This kind of launch is c ...

  6. JavaSE-19 IO

    学习要点 File类操作文件和目录的属性 字节流读写文件 字符流读写文件 字节流读写二进制文件 文件操作 1  文件的定义 文件可认为是相关记录或放在一起的数据的集合.文件一般保存在硬盘.U盘.光盘. ...

  7. C++ 标准模板库介绍(STL)

    1. STL 基本介绍 C++ STL(标准模板库)是惠普实验室开发的一系列软件的统称,是一套功能强大的 C++ 模板类.STL的目的是为了标准化组件,这样就不用重新开发,让后来者可以使用现成的组件, ...

  8. Spring中操作日志记录web请求的body报文

    在spring中,通常可以使用切面编程方式对web请求记录操作日志.但是这种方式存在一个问题,那就是只能记录url中的请求参数,无法记录POST或者PUT请求的报文体,因为报文体是放在request对 ...

  9. memcached协议解析 及使用

    本文转载自:http://www.ccvita.com/306.html 协议memcached 的客户端使用TCP链接与服务器通讯.(UDP接口也同样有效,参考后文的 “UDP协议” )一个运行中的 ...

  10. win7 x64安装glpk

    下载glpk,下载地址:http://ftp.gnu.org/gnu/glpk/