jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误,

原装的方法真的一点都不好用,所以我在我的引用文件里面扩展了 jQuery 的方法,可以直接用

var obj = $("#form").parseForm(); 变成 json 对象,然后直接扔给后台。

搜索引擎搜索如下关键字可以查找更多资料:

jquery如何将表单内容转为json对象

法1

//扩展jquery的格式化方法
$.fn.parseForm=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;
};

调用方法

var param = $("#insurInfoForm").parseForm();
$.ajax({
url : contextPath+'/products/policyList',
data : JSON.stringify(param),
type : 'post',
dataType : 'json',
async : false,
success : function(data) { }
});

法2

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};

调用方法参考上面~

使用方法(前提:使用的地方引入 jQuery):

法1:在需要格式化表单的html文件或者js文件中引入上面的方法。

法2:将如上的方法放进一个公共的js文件,然后在使用地方引入改公共的 js 文件。

参考:

https://blog.csdn.net/sychel/article/details/50068557

https://www.jb51.net/article/140685.htm

https://blog.csdn.net/lovesomnus/article/details/78026586

https://www.cnblogs.com/hyl8218/archive/2013/06/27/3159178.html

https://stackoverflow.com/questions/8900587/jquery-serializeobject-is-not-a-function-only-in-firefox

全文完

:)

原文地址:

https://www.cnblogs.com/poterliu/p/10142758.html

拓展jQuery的serialize(),将form表单转化为json对象的更多相关文章

  1. jQuery form表单序列化为JSON对象!

    /* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...

  2. jquery扩展方法(表单数据格式化为json对象)

    1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

  3. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  4. form表单序列化为json格式数据

    在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...

  5. 023-将表单序列化为json对象

    使用jQuery将表单序列化为json对象,其中serializeJson方法的名字任意,serializeArray()这个jQuery提供的方法.this指的就是谁调用了这个方法. $.fn.se ...

  6. 将表单序列化为JSON对象

    将表单序列化为JSON对象的工具方法: $(function() { //工具方法,可以将指定的表单中的输入项目序列化为JSON数据 $.fn.serializeJson = function() { ...

  7. Jquery 将表单序列化为Json对象

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...

  8. jQuery实现form表单序列化转换为json对象功能示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

随机推荐

  1. Jmeter (二十六)逻辑控制器 之 Module Controller and Include Controller

    Module Controller ---模块控制器 测试计划设置“独立运行没每个线程组” 线程组2中使用Module Controller执行线程组1中的Sampler: 紧接着,将线程组1disa ...

  2. 15.更新和删除数据--SQL

    一.更新数据 更新(修改)表中的数据,可以使用UPDA TE语句.有两种使用UPDA TE的方式: 更新表中的特定行: 更新表中的所有行. 警告:不要省略WHERE子句 在使用UPDA TE时一定要细 ...

  3. Python3.x下Selenium3.x之安装篇

    环境安装 Python环境: 首先我们需要安装Python语言,这个不过多详述,仅给出建议 Python2.x目前支持的第三方库类较多 Python3.x是修改了许多2.x版本的不足,但支持的库类较少 ...

  4. BZOJ 1059(二分图匹配)

    要点 发现每行每列都得有1 发现无论怎么换,在同一行的永远在同一行,同一列的永远在同一列 于是换行貌似没什么用啊,换列就够了.换列无法做到则无答案 于是变成了行与列进行二分匹配 #include &l ...

  5. NET Core容器

    NET Core容器化之多容器应用部署@Docker-Compose   1.引言 紧接上篇.NET Core容器化@Docker,这一节我们先来介绍如何使用Nginx来完成.NET Core应用的反 ...

  6. Jenkins+Gitlab+Ansible自动化部署(一)

    首先准备实验环境 虚拟机 主机名 IP地址 服务 系统版本 内核版本 Vmware Workstation 14 gitlab.example.com 192.168.244.130 gitlab  ...

  7. restful 风格 加上springmvc

    一.spring 版本:spring-framework-3.2.7.RELEASE 二.所需其它Jar包: 三.主要代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  8. B. DZY Loves Modification

    B. DZY Loves Modification time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  9. 3.Freshman阶段学习内容的确定

    我刷知乎.在知乎上答题的程序员,不是很牛逼就是更牛逼,说起各种系统.各种系统的各种版本.各种语言.数据库.算法.IT届的各种圣战都有板有眼.信手拈来.头头是道,不得不服.这导致了一些非常严重的问题:我 ...

  10. 【踩坑】spring每次请求后session不一样导致无法在服务器保存信息

    根据网上的资料,若想在服务器用session保存一些信息,方法如下: public Xclass Xmethod(HttpServletRequest request, HttpSession ses ...