`

序列化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()+...

    BootStrapTable实现增删改查

    BootstrapTable的核心是HTML的`&lt;table&gt;`元素,通过添加特定的类名和数据属性来初始化。例如: ```html &lt;table id="table" data-toggle="table" data-url="getData.json"&gt; &lt;th data-field="id"&gt;ID ...

    jQuery实现table上移下移和置顶

    - 考虑表单元素的序列化:如果表格包含表单数据,行的移动可能会影响到表单的序列化顺序,需要额外处理。 - 数据持久化:如果数据是从服务器获取并需要同步回服务器,那么在移动行后,你需要更新表格数据并发送请求...

    smartTable-2.2.0.zip

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

    【JavaScript源代码】nodejs获取表单数据的三种方法实例.docx

    对于表单元素,还可以利用jQuery提供的`serialize()`方法自动序列化表单中的所有字段,并将其作为POST请求的参数发送。 1. **HTML与JavaScript代码**: ```html 用户名"&gt; 密码"&gt; 提交 $("#inp3").on(...

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

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

    jquery_ajax_table_php

    在本次的分析中,我们将讨论的主题是"jquery_ajax_table_php",其中涉及的关键技术知识点包括jQuery的AJAX操作、JSON数据处理、表单序列化以及PHP后端数据处理。 首先,我们从jQuery开始。jQuery是一个快速、小巧且...

    LaravelMetableLaravel5应用程序中处理任意数据的包

    5. **序列化与反序列化**:对于数组和 JSON 类型,Laravel Metable 可自动进行序列化和反序列化,确保数据在存储和读取时保持一致。 6. **查询构建器集成**:你可以使用 Eloquent 查询构建器查询模型的元数据,例如...

    自定义表单组件

    `form-component.js`很可能是项目中自定义表单组件的核心代码,它可能包含了一些特定的逻辑和样式,如自定义验证规则、动态加载数据、表单序列化等。通过阅读和理解这个文件,我们可以学习到如何在实际项目中实现...

    SQL Mem Table

    5. **数据持久化**:由于内存数据库的数据在程序退出后会丢失,因此如果需要数据持久化,需要额外的机制来保存和恢复数据,例如序列化或定期写入磁盘。 6. **性能优化**:了解 SQL Mem Table 的性能瓶颈,比如内存...

    form表单复选框取值

    当用户点击删除按钮时,JS会序列化表单数据(包括选中的复选框)并使用AJAX发送POST请求到服务器。在本例中,请求的URL是`TeamMg_deleteContactManagement.action`,数据类型设置为`json`,并且传递了`form`变量...

    解决LayUI表单获取不到data的问题

    在使用`serialize()`之前,确保你的表单已经正确地添加了`layui-form`这个类,否则序列化操作将无法获取表单内容。 3. 表单验证 LayUI也支持对表单进行验证,使用`lay-verify`属性可以指定验证规则。例如,当你想要...

    基于javaweb 的bootstrap table使用案例源码下载

    在Bootstrap Table中,用户还可以通过输入框进行查询,这需要在前端添加一个表单,并绑定`keyup`事件来触发Ajax请求。在后端,你需要解析这些查询参数,并在SQL查询中加入相应的条件。 总的来说,这个案例涵盖了...

    循环获取多行table值.rar

    在实际应用中,这种功能可能还会涉及到数据的序列化、异步操作(如AJAX请求)、数据验证等复杂逻辑。但根据提供的信息,主要的焦点在于使用JavaScript高效地遍历和获取HTML表格的多行数据。理解和掌握这些技术对于...

    jquery+ajax实现直接提交表单实例分析

    1. **表单序列化(Form Serialization)**: 表单序列化是将表单中的各个字段值组合成一个符合请求协议的数据格式(通常是application/x-www-form-urlencoded)。在jQuery中,我们可以使用`.serialize()`方法轻松...

    python测试开发django-173.bootstrap实现table表格行内编辑(csdn)————程序.pdf

    `&lt;tr&gt;`中的`&lt;td&gt;`元素包含了一个`&lt;input&gt;`标签,它的`name`属性是动态的,允许在提交表单时以JSON格式序列化数据。`&lt;input&gt;`的`title`属性提供了提示信息,而`width`和`height`属性确保输入框占据整个单元格。删除...

    PDF模板读写示例.zip

    这个过程涉及到PDF文档的序列化,需要确保所有更改都正确地写回到PDF结构中。C#库会提供Save或Update方法来完成这个操作,确保表单数据的完整性和一致性。 4. **C#库的使用**: 在C#中,常用的PDF处理库有...

    jQuery ajax提交Form表单实例(附demo源码)

    2. **序列化表单数据**:使用jQuery的`serializeArray()`方法可以获取表单元素的键值对,并将其转换为一个数组,数组中的每个元素是一个包含name和value的对象。 3. **构造AJAX请求**:使用$.ajax()方法将表单数据...

    editTable2.rar

    4. **JSON序列化和反序列化**:将表格数据转化为JSON字符串,以及从JSON字符串还原数据。 5. **AJAX通信**:可能用到AJAX来异步保存用户编辑的数据到服务器。 6. **用户界面**:设计友好的用户界面,例如添加、删除...

    Django官方文档中文翻译(models部分)

    六、序列化与反序列化 1. 序列化:将模型实例转换为JSON或其他格式,以便在网络上传输或保存到文件。 2. 反序列化:将JSON或其他格式的数据转换回模型实例,用于数据导入或API接口。 七、表单(Forms)与模型表单...

Global site tag (gtag.js) - Google Analytics