在开发中有时需要在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. centos7.2密码在单用户下面的修改

    centos7.2在但用户模式下面的修改 1.开机启动 2.grub模式按E健 3.Linux16行的"ro"修改为 "rw init=/sysroot/bin/sh&q ...

  2. 【VBA研究】如何用Base64 编解码方法实现简单的加解密

    Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码,将数据变成字符串实现文本传输.由于编码简单,所以很容易实现,代码也是现成的.利用这个编码规则可以实现简单的加解密.编解码方 ...

  3. PyQt5实现第一个桌面应用程序

    import sysfrom PyQt5.QtWidgets import QApplication,QWidget,QDialogfrom PyQt5.QtCore import Qt if __n ...

  4. 指定PHP编码

    有时候我们写好的PHP页面在网页中打开是乱码的,就需要指定编码,即加入代码: header("content-type:text/html;charset=utf-8"); 位置图 ...

  5. ERROR 1133 (42000): Can't find any matching row in the user table

    环境:操作系统:Redhat 7.5 x86-64 数据库版本MySQL 5.7.25 现象:ERROR 1133 (42000): Can't find any matching row in th ...

  6. 如何HTML标签和JS中设置CSS3 var变量

    一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" ...

  7. python 3 廖雪峰博客笔记(二) python解释器

    python 解释器用于理解 python代码,存在多种python解释器 CPython 官方版本python解释器,用C语言开发,使用最广泛 IPython 基于CPython,在交互方式上有所增 ...

  8. BZOJ 2055 80人环游世界 有上下界最小费用可行流

    题意: 现在有这么一个m人的团伙,也想来一次环游世界. 他们打算兵分多路,游遍每一个国家.    因为他们主要分布在东方,所以他们只朝西方进军.设从东方到西方的每一个国家的编号依次为1...N.假若第 ...

  9. 在你的Android手机上运行Linux

    之前试过许多方法(也就几种),像什么Complete Linux Installer,Debian noroot,利用已有的Linux构造Bootstrap之类,要么就是复杂得要命(调了两天没有调出来 ...

  10. CSU1020: 真三国无双

    1020: 真三国无双 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 1042   ...