`

序列化table表单

阅读更多

     对序列化表单稍微做一个小结。序列化表单值的结果是输出以数组形式。serializeArray() 方法通过序列化表单值来创建对象数组(名称和值),返回 JSON 数据结构数据。此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。以下是我的一个例子:

 html页面:

<form id="form">
        <table class="table bordered">
            <thead>
                <tr>
                    <th class="text-left">店铺名称</th>
                    <th class="text-left">店铺域名</th>
                    <th class="text-left ">备注</th>
                    <th class="text-left">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input name="ShopName" type="text" style="width: 103px;" />
                    </td>
                    <td>
                        <input name="Domain" type="text" style="width: 103px;" /></td>
                    <td>
                        <input name="Remark" type="text" style="width: 103px;" /></td>
                    <td class="opt">
                        <input type="button" class=" icon-pencil btn" title="提交" value="提交" />
                    </td>
                </tr>

            </tbody>
        </table>
    </form>

  序列化表单:

 $(".btn").click(function () {
            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 || '';
                }
            });
            $.ajax(
              {
                  type: "post", 
                  contentType: "application/json", 
                  url: "/DianPuApply/PostIndex", 
                  data: JSON.stringify(o),//转换数据格式
                  success: function (msg) { 
                      if (msg.OperationResultType == 0) {
                          jAlert("操作成功", "系统提示", function () {
                              window.location.reload()
                          })
                      } else {
                          jAlert(msg.Message)
                      }
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown) {
                      jAlert(XMLHttpRequest.statusText);
                  }
              });
        });

 序列化表单图1

 

 转换数据



 

 

  • 大小: 12.1 KB
  • 大小: 11.4 KB
  • 大小: 3 KB
分享到:
评论

相关推荐

    JS中from 表单序列化提交的代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: // ----ajax begin $.ajax({ type: "POST", url: "../compRule/updateRuleById?tids="+compTableName_val+"&isReportName="+$('#isReport_update').val()+...

    smartTable-2.2.0.zip

    表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...

    一款android自动生成表格框架smartTable-master.zip

    表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...

    与jquery serializeArray()一起使用的函数,主要来方便提交表单

    .serializeArray() 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。 有以下一个表单窗口,代码: 代码如下: &lt;form action=”” method=”post” id=”tf”&gt; &lt;table ...

    Java面试宝典2020修订版V1.0.1.doc

    11、什么是java序列化,如何实现java序列化? 59 12、编写一个程序,将d:\java目录下的所有.java文件复制到d:\jad目录下,并将原来文件的扩展名从.java改为.jad。 60 13、java中有几种类型的流?JDK为每种类型的流...

    JavaScript王者归来part.1 总数2

     13.6.2 一个采用两重table嵌套方式固定表头的例子   13.6.3 可变列宽的实现   13.6.4 标记行--呈现有别于其他行的背景色   13.6.5 小技巧--将代码添加到样式表   13.7 总结   第14章 级联样式表  14.1 ...

    JAVA上百实例源码以及开源项目源代码

     Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...

    python入门到高级全栈工程师培训 第3期 附课件代码

    Django序列化共6课 第61章 01 上节内容回顾 02 上传文件 03 制作上传按钮 04 Form组件上传文件 05 上传相关内容梳理 06 Model操作知识提问 07 Model操作概述 08 Model字段 09 Model连表字段参数详解 10 Model...

    JAVA上百实例源码以及开源项目

     Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...

    asp.net知识库

    泛型的序列化问题 .NET 2.0 泛型在实际开发中的一次小应用 C#2.0 Singleton 的实现 .Net Framwork 强类型设计实践 通过反射调用類的方法,屬性,字段,索引器(2種方法) ASP.NET: State Server Gems 完整的动态加载/卸载...

    net学习笔记及其他代码应用

    答:Class可以被实例化,属于引用类型,是分配在内存的堆上的,Struct属于值类型,是分配在内存的栈上的. [Page] 26.根据委托(delegate)的知识,请完成以下用户控件中代码片段的填写: namespace test { public ...

    Java学习笔记-个人整理的

    {7.4}基本类型数据序列化}{108}{section.7.4} {7.5}String的序列化}{109}{section.7.5} {7.6}InputStream与OutputStream}{109}{section.7.6} {7.6.1}FileInputStream}{109}{subsection.7.6.1} {7.6.2}...

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() ... $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数,隐藏所有 &lt;p&gt; 元素。...

    入门学习Linux常用必会60个命令实例详解doc/txt

    -s,--strip:用strip命令删除symbol table,只适用于第一及第二种使用格式。 -S,--suffix=后缀:自行指定备份文件的&lt;后缀&gt;。 -v,--verbose:处理每个文件/目录时印出名称。 --help:显示此帮助信息...

    C#编程经验技巧宝典

    98 &lt;br&gt;0153 如何自定义数字小数点左边分组位数 98 &lt;br&gt;0154 格式化输入数据为货币格式 99 &lt;br&gt;0155 如何计算两个整数的乘积 99 &lt;br&gt;0156 如何将二进制数转换为十进制数 100 &lt;br&gt;0157 如何...

Global site tag (gtag.js) - Google Analytics