在开发中有时需要在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++】朝花夕拾——STL vector

    STL之vector篇 N久之前是拿C的数组实现过vector中的一些简单功能,什么深拷贝.增删查找之类的,以为vector的实现也就是这样了,现在想想真是...too young too naive ...

  2. OpenFlow_tutorial_1_Introduce

    tutorial出处:https://github.com/mininet/openflow-tutorial/wiki OpenFlow是用于远程控制交换机流表(forwarding tables) ...

  3. lua之链表的实现

    -- lua链表的实现 node = {} list = node --初始化,构建一个空表 function init() list.data = --我将头结点的数据域存放链表的长度,以免浪费空间 ...

  4. CAD参数绘制样条线(网页版)

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定位置.详细说明如下: 参数 说明 DOUBL ...

  5. [BZOJ] 1037 [ZJOI2008]生日聚会

    Time Limit: 10 Sec Memory Limit: 162 MB Submit: 3007 Solved: 1795 [Submit][Status][Discuss] Descript ...

  6. 零基础入门学习Python(17)--函数:Python的乐高积木

    前言 相信大家小时候都玩过神奇的乐高积木, 只要通过想象力和创造力我们可以拼凑很多神奇的东西,那么随着我们学习的深入,我们编写的Python代码也将日益增加,并且也越来越复杂, 所以呢,我们需要找寻一 ...

  7. 树莓派 -- oled 续(2) python

    上文中的代码通过wiringPi的API调用devfs API来显示图片. 这里分析的Python代码也通过类似的方法来显示图片. 主要用到了两个Library. import spidev impo ...

  8. python 多线程并发threading & 任务队列Queue

    https://docs.python.org/3.7/library/concurrency.htmlpython程序默认是单线程的,也就是说在前一句语句执行完之前后面的语句不能继续执行先感受一下线 ...

  9. java实现扫二维码登录功能

    哈哈哈 http://blog.sina.com.cn/s/blog_7f416edf0102vb8h.html http://blog.sina.com.cn/s/blog_7f416edf0102 ...

  10. HTML基础知识 table中 th,td,tr

    https://www.2cto.com/kf/201711/701872.html table是一个布局神器,之前看过很多代码,都是用table布局的.但是,我在学习的过程中,发现table有很迷的 ...