zoukankan      html  css  js  c++  java
  • 另类的表单数据"序列化"

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

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

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

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

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

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

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

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

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

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

    html如下:

     1 <div id="demos">
     2     <input id="Id" type="hidden" value="14" />
     3     <input id="ActivityName" type="text" value="" />
     4     <input id="ActivityContent" type="text" value="" />
     5     <input id="ActivityTime" type="text" value="" />
     6     <input id="ActivityAddress" type="text" value="" />
     7     <input id="PersonInChage" type="text" value="" />
     8     <input id="Field1" type="text" value="" />
     9     <input id="Field2" type="text" value="" />
    10     <input id="Field3" type="text" value="" />
    11     <input id="Field4" type="text" value="" />
    12 </div>

    js如下 

     1  function GetFormParamsInfo() {
     2         var jsonModle = {};
     3         $("#demos input").each(function () {
     4             var fieldName = $(this).attr("id");
     5             var fieldValue = $(this).val();
     6             jsonModle[fieldName] = fieldValue;
     7         });
     8         return jsonModle;
     9     };
    10 
    11     $.ajax({
    12         type: "POST",
    13         url: "Home/Index",
    14         data: GetFormParamsInfo(),
    15         success: function (msg) {
    16            //.....
    17         }
    18     });

    以上代码中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)

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

  • 相关阅读:
    PHP里json_encode()与json_decod()区别
    数组进行排序
    tp5利用自带上传类实现单个文件与多文件上传
    mkdir() Permission denied 报错问题
    如何快速熟悉新项目的代码?
    Tp5自定义路径写入日志
    spring解决循环依赖
    spring注解的使用
    ssm的整合
    编程知识总结
  • 原文地址:https://www.cnblogs.com/louischeng/p/4052650.html
Copyright © 2011-2022 走看看