在开发中有时需要在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. mysql中对order by的函数substring_index() , find_in_set()使用

    题目是这样的:sql = "select  *  from table  where  id  in(3,1,2,5)";  怎样使得查询的结果按照 3 ,1 , 2, 5来排序: ...

  2. 6-Java-C(移动距离)

    题目描述: X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1  2  3 ...

  3. 一个圆的移动 AE教程 速度曲线调节

    AE里面速度的曲线调节 最终的小效果 两个关键点: 一:速度曲线调节 编辑速度图标,他的曲线是编辑速度的. 二:节点不要用贝塞尔曲线 编辑值图标,就是圆圈的x值y值的曲线.控制位置移动的. 选择一个节 ...

  4. ssd运行过程中遇到的bug

    1.出现以下错误: 没有添加环境变量: https://github.com/weiliu89/caffe/issues/4 可以看到当前PYTHONPATH不再ssd1里面,所以需要修改,修改之后就 ...

  5. redis简介以及安装

    redis作为开源的高性能的键值对数据库,本身是单线程的,性能虽然没有memcache高,但是也是性能跟memcache相差无几的,memcache是多线程的,但是redis本身功能更加强大,学习一下 ...

  6. weblogic启动 web应用ssh关闭 nohup命令

    平时我们操作linux服务器的时候,都是通过ssh远程连接,然后启动服务器上的服务的,所以有时候启动weblogic,我们关闭ssh,weblogic 服务也相应的关闭了,那么我们就只能用nohup这 ...

  7. 专题训练——[kuangbin带你飞]最短路练习

    最短路练习 0. Til the Cows Come Home  POJ - 2387 完美的模板题 //#include<Windows.h> #include<iostream& ...

  8. [Python3网络爬虫开发实战] 3.1.4-分析Robots协议

    利用urllib的robotparser模块,我们可以实现网站Robots协议的分析.本节中,我们来简单了解一下该模块的用法. 1. Robots协议 Robots协议也称作爬虫协议.机器人协议,它的 ...

  9. 零基础入门学习Python(21)--函数:lambda表达式

    知识点 lambda 表达式 Python 允许使用lambda关键字创建匿名函数 lambda 函数怎么使用? 单个参数 >>> def add(x): return 2*x + ...

  10. Python-基本图形绘制及库引用

    turtle库的使用 概述:turtle(海龟)库是turtle绘图体系的python实现 turtle库的理解: -有一只海龟,其实在窗体正中心,在画布上游走 -走过的轨迹形成了绘制的图形 -海龟由 ...