在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串。

首先,是扩展的jquery序列化插件,依赖jquery。经测试,这段代码可以放在$(funciton(){})中,也可以放在外面,都可以实现效果。

$.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;
};

如果上面的方法不能调用,还可以这样做(本人在实际开发中,上面方法使用不了,甚是纠结,就采用了此法):

function serializeObject(form)
{
var o = {};
var a = $(form).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;
};

调用如下:

function submitForm(){
var data= serializeObject("#form1");
alert(JSON.stringify(data));
}

如果需要是使用ajax请求的化,本人是用网络上的一个例子,也不错,如下:

function addPersonInfo(){  

   //序列化form

    var data = $('#personInfo').serializeObject();   

   $.ajax({

       type:"post",

       dataType: "json",

       url:"http://localhost:8080/appname/queryByCondition",

    data:JSON.stringify(data),

    contentType: "application/json;charset=utf-8",

    success: function(msg) {

    var notice = eval(msg);

    if(notice.type=="success"){

       alert(notice.msg);

       window.location.href=notice.data.url; 

    }else if(notice.type=="validFail"){

    $.each( notice.errors, function(index, dataValidMsg)

                   { 

                      alert(dataValidMsg.msg ); 

                    }); 

    }else if(notice.type="fail"){

    alert(notice.msg);

    }

    },

    error: function(msg) {

       var notice = eval(msg);

    alert(notice.msg);

    }

    }); 

}

上面的代码给我很多帮助,希望写出来可以帮助更多的朋友,同时也方便自己查阅借鉴。

form表单序列化为json格式数据的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. form表单数据封装成json格式并提交给服务器

    1.jsp代码,form表单: <form action="#" id="costForm"> <input type="hidde ...

  7. form表单序列化为Jquery对象

    <form id="DailyFinancial" > @*class="form-inline"*@ <div class="fo ...

  8. 拓展jQuery的serialize(),将form表单转化为json对象

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

  9. 将form表单转化为json数据

    参考地址:https://github.com/hongymagic/jQuery.serializeObject

随机推荐

  1. Json中不支持任何形式的注释,那我们要怎么解决呢

    Json中不支持任何形式的注释,我们可以使用曲线救国的思路:在对象的定义中添加一个key(comment),其对应的value值就是注释填写的语句. 如: { "name":&qu ...

  2. 9.4-9.19 h5日记总结

    总结: 1.标签 (1)单.双标签 (2)块级.行级标签 (3)标签的属性 2.CSS (1)选择器 *.id.class.标签.后代.子代.并集.交集.伪类.结构 (2)层叠性,即选择器权重的计算 ...

  3. 23.Mysql应用优化

    23.应用优化23.1 使用连接池应用启动时创建好连接,以供用户使用,而不是每次创建. 23.2 减少对Mysql的访问 23.2.1 避免对同一数据做重复检索合并简单查询,减少访问次数. 23.2. ...

  4. 常用Date操作方法

    public class DateUtils {     /**    * 获取时间戳    * 输出结果:1438692801766    */   @Test   public void getT ...

  5. java学习笔记1--基础知识

    1.java数据类型 2.类之间的几种关系

  6. Nginx 的 docker 部署

    1.输入命令 docker pull nginx:1.15 拉取 nginx 的镜像: 2.使用 docker images 查看拉取到的镜像信息: 3.在主机上创建用于映射的目录 mkdir -p ...

  7. mysql 8小时timeout问题

    MySQL> show variables like '%timeout%'; +--------------------------+-------+ | Variable_name      ...

  8. MySQL学习笔记-MySQL数据库优化实践[转]

    最近一段时间,我们整理了一些关于Percona,Linux,Flashcache,硬件设备的优化经验,分享给大家: 硬件 1.开启BBWC RAID卡都有写cache(Battery Backed W ...

  9. Struts问题

    1.struts框架的5大组件:mvc,标签库,校验框架,国际化,tiles; 2.struts的9大核心类以及与mvc对应的关系: C ActionServlet RequestProcessor ...

  10. js Array 方法总结

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...