form 表单序列化 serialize
在开发中有时需要在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的更多相关文章
- jquery ajax(5)form表单序列化
form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...
- form表单序列化数据之后,追加额外数据
form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...
- 原生js实现form表单序列化
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- 原生JS实现表单序列化serialize()
有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...
- jQuery实现form表单序列化转换为json对象功能示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js将form表单序列化[json字符串、数组、对象]
1.序列化为字符串 $("#Form").serialize();//name=zhangsan&sex=1&age=20 2.序列化为数组 var formD ...
- 将复杂form表单序列化serialize-object.js
<form class="form-horizontal" role="form" id="myform" action=" ...
- form表单序列化serialize-object.js
<form class="form-horizontal" role="form" id="myform" action=" ...
- form表单序列化后的数据转json对象
function formToJson(){ var data = $("#form").serialize(); data= decodeURIComponent(data,tr ...
随机推荐
- (转)淘淘商城系列——MyBatis分页插件(PageHelper)的使用以及商品列表展示
http://blog.csdn.net/yerenyuan_pku/article/details/72774381 上文我们实现了展示后台页面的功能,而本文我们实现的主要功能是展示商品列表,大家要 ...
- Ryubook_1_switch_hub_源码
一.switching hub by openflow: 用Ryu实现一个有如下功能的switching hub. • Learns the MAC address of the host conne ...
- Swift 命名空间形式扩展的实现
Swift 的 extension 机制很强大,不仅可以针对自定义的类型,还能作用于系统库的类型,甚至基础类型比如 Int.当在对系统库做 extension 的时候,就会涉及到一个命名冲突的问题.O ...
- element-UI el-table二次封装
Part.1 为什么要二次封装? 这是 Element 网站的 table 示例: <template> <el-table :data="tableData" ...
- Java中创建对象的内存图
所有人都知道面向对象思想,Java中的对象的创建在内存中是如何创建的,传智播客的视频看了一遍,把一些讲解的比较清晰的内容记录下来,方便记忆的更加深刻,Java中创建对象的过程,首先要理解JVM中栈.堆 ...
- CCF计算机职业资格认证考试 201809-2 买菜
以下内容过于幼稚,请大佬自觉绕道.. 题目描述: 时间限制:1.0s内存限制:256.0MB问题描述:问题描述 小H和小W来到了一条街上,两人分开买菜,他们买菜的过程可以描述为,去店里买一些菜然后去旁 ...
- linux与linux之间共享目录
1.安装必要的包 nfs-utils rpcbind (nfs是基于sun公司的rpc通信实现的,所以要装rpcbind) 这2包,在服务端和客户端都需要安装,并启动服务. 启动 ...
- python爬取百度文库所有内容
转载自 GitHub 的 Jack-Cherish 大神 基本环境配置 版本:python3 系统:Windows 相关模块: import requests import re import jso ...
- Quartz --Scheduler
- CSS实现折叠面板
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...