背景:最近在做项目时,由于编辑页面需要提交的数据量有些多,而且在提交前还需要做一些逻辑处理,所以如果按照正常的方式,一个个的获取值然后拼接json对象传到后台的话相对工作量较大,而且容易出错,后期的维护工作也相对困难,于是爱偷懒的我就像能不能有个办法不用一个个的去获取值,拼json对象,还能直接以与数据库表结构相同的model的方式接收数据呢?就我所知的好像目前现有的方式都是通过序列化插件什么的,而我当时也有考虑用这个,但是我觉得这些插件尤其让人人用着不爽的缺点:

(1)需要提交的内容必须在<form>标签内

(2)序列化后的json包含<form>里面的全部表单内容

(3)无法满足一些个性化要求(如多选时以","隔开;既需要去下拉框的value也需去text)

而我的项目中有以下几个要求

(1) 部分数据在母版页中(会随着用户的不同操作而改变)

(2)用户不同操作,提交的数据也不一致

(3)有些数据需要做特殊处理

有的朋友可能会说既然这样那你完全可以把form放在母版页里呀, 处理好的数据放在页面的隐藏域利亚.可是如果这样处理的话那么提交的内容将相当多,隐藏域也相当的多,所以我选择了用以下方式:

为了方便理解以下代码均做了简化处理

html如下:

 <div id="demos">
<input id="Id" type="hidden" value="14" />
<input id="ActivityName" type="text" value="" />
<input id="ActivityContent" type="text" value="" />
<input id="ActivityTime" type="text" value="" />
<input id="ActivityAddress" type="text" value="" />
<input id="PersonInChage" type="text" value="" />
<input id="Field1" type="text" value="" />
<input id="Field2" type="text" value="" />
<input id="Field3" type="text" value="" />
<input id="Field4" type="text" value="" />
</div>

js如下

  function GetFormParamsInfo() {
var jsonModle = {};
$("#demos input").each(function () {
var fieldName = $(this).attr("id");
var fieldValue = $(this).val();
jsonModle[fieldName] = fieldValue;
});
return jsonModle;
}; $.ajax({
type: "POST",
url: "Home/Index",
data: GetFormParamsInfo(),
success: function (msg) {
//.....
}
});

以上代码中GetFormParamsInfo方法中可以在return之前任意的添加自己特定处理的代码如

if(a==b)

{

  jsonModle["xxx"] = xxxx;

}else{

jsonModle["xxxxx"] = xxxxxxxxx;

}

return  jsonModle;

等等,可以任意的去

后台代码:

 public class HomeController : Controller
{
public ActionResult Index(ViewModcl model)
{
//处理
return View();
} } public class ViewModcl
{
public string Id { set; get; }
public string ActivityName { set; get; }
public string ActivityContent { set; get; }
public string ActivityTime { set; get; }
public string ActivityAddress { set; get; }
public string PersonInChage { set; get; }
public string Field1 { set; get; }
public string Field2 { set; get; }
public string Field3 { set; get; }
public string Field4 { set; get; } }

说明如下:

html中的需要提交的内容之div中 然后我获取需要提交的内容时只需要通过each遍历组装成json对象,然后通过ajax直接提交到后台,而后台以实体类对象方式直接接收就好了

有点:

1,无需form

2,可以任意制定参数规则

3,提交最小数量的数据内容(不相关的数据都不提交)

4,几乎无需隐藏域(编辑时存储id)

由于个人能力有限,自然有些考虑不到的,还望各位路过的大牛们能帮忙指点指点,小弟在此先谢谢了.

另类的表单数据"序列化"的更多相关文章

  1. jQuery对的表单数据序列化和校验

    jQuery对的表单数据序列化和校验 表单序列化 如果想让表单通过ajax异步提交,那么首先我们要通过js获取到每个表单中输入的值,如果表单项比较多的话,是一件很麻烦,很痛苦的事情,那么我们可以通过j ...

  2. Ajax--serialize应用表单数据序列化

    一.jQuery+Ajax表单数据序列化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  3. 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  4. 序列化表单数据$("form").serializeArray()

    在做一个后台管理系统类似的项目中发现不能直接取得表单中的数值,于是想到先将表单数据转化为json,然后再用js从json中获取数据,那不就简单了吗? 于是我用了jquery的serializeArra ...

  5. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  6. django(7)modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  7. Ajax提交表单数据(包含文件)

    1. 表单数据->JSON->后台 2. 表单序列化[方式一] jquery.serializejson.js <script src="/js/jquery.serial ...

  8. jsp提交表单数据乱码,内置对象,以及过滤器

    jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...

  9. Struts2中Action取得表单数据的几种方法

    Struts2中Action取得表单数据的几种方法   Struts2中Action获得表单数据的几种方法struts2 Action获取表单传值 1.通过属性驱动式JSP: <form act ...

随机推荐

  1. <c:if test="value ne, eq, lt, gt,...."> 用法

    类别 运算符 算术运算符 + . - . * . / (或 div )和 % (或 mod ) 关系运算符 == (或 eq ). != (或 ne ). < (或 lt ). > (或 ...

  2. mongodb安装、启动、远程连接

    1.现在mongodb安装包 mongodb-linux-x86_64-3.0.6.tgz 2.解压缩安装包 tar zxvf  mongodb-linux-x86_64-3.0.6.tgz /opt ...

  3. xml in SQL

    几年前,学习html时,顺便把xml也学了哈,知道了xpath和xquery的概念,可都没去落实,下面这篇文章,可以学习学习 http://www.cnblogs.com/huyong/archive ...

  4. Android OutOfMemoryError的理解

    最近写了个测试demo调试网络优化,发现下载20M的文件时我直接申请了20M的空间,然后就OOM导致crash了~~ 典型的错误信息如下: OutOfMemoryError:Out of memory ...

  5. 使用VBScript实现设置系统环境变量的小程序

    本人有点桌面洁癖,桌面上只放很少的东西,很多软件都用快捷键调出.最近频繁用到一个软件,我又不想放个快捷方式在桌面,也不想附到开始菜单,于是乎想将其所在目录附加到系统环境变量Path上,以后直接在运行中 ...

  6. Range Sum Query - Mutable

    https://leetcode.com/problems/range-sum-query-mutable/ 因为数组会变动,所以缓存机制受到了挑战...每次更新数组意味着缓存失效,这样一更新一查找的 ...

  7. gulp

    npm install -g gulp // 全局安装gulp 是为了执行 gulp 任务npm install gulp --save-dev // 本地安装gulp 是为了调用 gulp 插件 - ...

  8. CPT单臂路由

    路由器配置:Router>enableRouter#configure terminal        进入全局配置模式Router(config)#int fa0/1        进入端口R ...

  9. [转载] SSH入门学习基础教程

    在Linux系统中,OpenSSH是目前最流行的远程系统登录与文件传输应用,也是传统Telenet.FTP和R系列等网络应用的换代产品.其 中,ssh(Secure Shell)可以替代telnet. ...

  10. shell获取文件最后100行,开头100行,指定开始行和结束行的内容

    文件最后100行:tail -n100 filePath: 文件开头100行:head -n100 filePath: 文件指定开始行和结束行的内容:sed '1,100p' filePath: 文件 ...