在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. Aspose.words四 bookmark

    通过添加bookmark书签来添加数据,首先通过方法MoverToBookmark移动指定的标签位置,然后添加数据,添加完成后清除掉bookmark标示. string templateFile = ...

  2. sqlserver数据库的分离与附加

    当我们一台电脑上创建了数据库想要转移到另外一台电脑上时,由于数据库处于联机状态,不能够对数据库文件进行复制和迁移,所以我们可以将数据库从服务器上分离出去,这样我们就可以复制数据库文件了.然后将数据库文 ...

  3. node.js下载安装

    1.下载node.js在node中文网站,官方网站下载太慢 2.接着让我们点击下载链接,页面上呈现出你所需要下载的安装包,我们这里选择windows x64的安装包进行下载 3.安装node.js,一 ...

  4. 5I - 汉诺塔IV

    还记得汉诺塔III吗?他的规则是这样的:不允许直接从最左(右)边移到最右(左)边(每次移动一定是移到中间杆或从中间移出),也不允许大盘放到小盘的上面.xhd在想如果我们允许最大的盘子放到最上面会怎么样 ...

  5. XiaoKL学Python(D)argparse

    该文以Python 2为基础. 1. argparse简介 argparse使得编写用户友好的命令行接口更简单. argparse知道如何解析sys.argv. argparse 模块自动生成 “帮助 ...

  6. linux 使用笔记6

    ---恢复内容开始--- 1.内容追加 把一个文件的内容追加到另一个文件中: cat first.txt >> second.txt//追加到second.txt文件的末端    cat ...

  7. linux利用crontab设置定时任务运行jar包

    参考链接: 1.http://blog.csdn.net/javadhh/article/details/42779505 2.http://blog.csdn.net/cctv_liu/articl ...

  8. Codeforces 803C. Maximal GCD 二分

    C. Maximal GCD time limit per test: 1 second memory limit per test: 256 megabytes input: standard in ...

  9. Codeforces 749D. Leaving Auction set+二分

    D. Leaving Auction time limit per test: 2 seconds memory limit per test:256 megabytes input:standard ...

  10. NC 6系后台调用接口保存单据

    IPFBusiAction ipf = (IPFBusiAction)NCLocator.getInstance().lookup(IPFBusiAction.class); ipf.processA ...