序列化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
序列化table表单
 
序列化table表单
 转换数据



 

 

你可能感兴趣的:(jquery,序列化表单)