在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. [z]spring boot gradle build

    I had the same problem. I believe it is caused by the JRE that gradle is configured to use rather th ...

  2. 更改AVD默认路径

    默认情况下,安卓模拟器镜像文件会放到%userprofile%\.android下,例如当前Win7登录用户为administrator 则%userprofile%为 c:\users\admini ...

  3. vue-form表单验证插件

    参考地址:https://segmentfault.com/q/1010000003988864 github地址:https://github.com/fergaldoyle/vue-form 安装 ...

  4. nginx 启动报错 “/var/run/nginx/nginx.pid" failed” 解决方法

    问题: 重启虚拟机后,再次重启nginx会报错: open() "/var/run/nginx/nginx.pid" failed (2: No such file or dire ...

  5. javascript 高级程序设计 七

    引言:好几天没有写随笔了,项目有点紧,恰好今天项目遇到了比较大阻塞,就只好来写一篇随笔来压压惊. 1.Date类型 创建一个新的Date:(除了new Date()外) var someDate = ...

  6. BZOJ1123或洛谷3469 [POI2008]BLO-Blockade

    BZOJ原题链接 洛谷原题链接 若第\(i\)个点不是割点,那么只有这个点单独形成一个连通块,其它点依旧连通,则答案为\(2\times (n-1)\). 若第\(i\)个点是割点,那么去掉这个点相关 ...

  7. dbc file

    DBC文件是用来描述CAN网络通信信号的一种格式文件.它可以用来监测与分析CAN网络上的报文数据,也可以用来模拟某个CAN节点.(DBC file is a format file used to d ...

  8. [Groovy] 创建Excel,追加Excel

    package ScriptLibrary import java.awt.Color import java.awt.GraphicsConfiguration.DefaultBufferCapab ...

  9. python 字符串占位符的使用

    name2='我是{} 我的专业是 {}'.format('张三','计算机科学技术')print(name2)

  10. wepy - 小程序开发框架

    2017-09-23 运行命令. wepy build --watch 2017-11-06 wepy一直用的1.5.8,同事有一次安装了最新的1.6.0就报错了... unexpected char ...