在开发中有时需要在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"}

文章可能没有多深或多新颖的知识点,但都是自己亲手实践,记录自己感受与收获。

												

jquery序列化form表单的更多相关文章

  1. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  2. jquery 序列化form表单

    1.为什么要将form表单序列化? ajax上传form表单的原始方式,是将form表单中所需要的键值对先获取,然后再组装成数据(两种方式:http:localhost:8080/test.do?pe ...

  3. jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)

    1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...

  4. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  5. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

  6. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  7. thinkphp处理jQuery EasyUI form表单问题

    jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...

  8. jQuery控制form表单元素聚焦

      CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...

  9. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

随机推荐

  1. ios页面跳转

    reference:http://blog.csdn.net/engandend/article/details/11706323 目前,就我所学到的内容,页面跳转有三种方法 一.直接推到下一个页面 ...

  2. UVa 11340 - Newspaper

    题目大意:报社根据文章中不同字符的价值付费给作者,给出字符的价值,计算一篇文章应付多少钱给作者. 先统计文章中每个字符出现的次数,再计算价值.直接寻址表(Direct Addressing Table ...

  3. Oracle数据库和实例的区别

    一般Oracle数据库(Oracle Database)可以分为两部分,即实例(Instance)和数据库(Database). 实例:是一个非固定的.基于内存的基本进程与内存结构.当服务器关闭后,实 ...

  4. 使用UTF8-CPP转换unicode编码 附录:UTF8和UTF16和UTF32和Unicode编码

    本文用于解决如何用C++处理字符串的编码格式.本文采用的是成熟便捷的UTF8库来处理这个问题.首先是下载UTF8库,网址为:http://utfcpp.sourceforge.net/ 为了方便后续使 ...

  5. iOS 之 assign、retain、copy、nonatomic

    1. assign 1.1. 普通赋值 一般用于基本类型 1.2. 常见委托设计模式 防止循环引用 2. retain 保留计数,获取了对象的所有权.引用计数在原有基础上加1. 3. copy 同re ...

  6. 2.8. 创建 NSManagedObject 的子类 (Core Data 应用程序实践指南)

    现在根据模型来创建NSManagedObject的子类.如果模型改变了,那就就重新生成这些文件.所以,不要在生成的文件里自定义方法,因为重新生成之后,这些修改就丢失了.假如确实需要重新生成自定义的方法 ...

  7. 阿里云上给的防止跨站和xss攻击的代码

    文档说明: 1.将waf.php传到要包含的文件的目录 2.在页面中加入防护,有两种做法,根据情况二选一即可: a).在所需要防护的页面加入代码require_once('waf.php');就可以做 ...

  8. html标签默认样式整理

    引:http://www.jb51.net/web/94964.html 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 html, a ...

  9. C# 堆栈和堆 Heap & Stack

    首先堆栈和堆(托管堆)都在进程的虚拟内存中.(在32位处理器上每个进程的虚拟内存为4GB) 堆栈stack 堆栈中存储值类型. 堆栈实际上是向下填充,即由高内存地址指向低内存地址填充. 堆栈的工作方式 ...

  10. JSON数据格式中的引号

    JSON数据中必须使用双引号: $.getJSON,的输入必须是正确的JSON数据,否则不会执行回调函数: $.parseJSON的输入必须是正确的JSON数据,否则会有异常: