当前位置:首页 > 编程教程 > javascript技术文章 > JS多个表单数据提交下的serialize()应用实例分析

JS中serialize()多表单数据提交应用实例

  • 发布时间:
  • 作者:码农之家
  • 点击:200

这篇文章主要知识点是关于JS、表单、数据提交、serialize、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript启示录
JavaScript启示录原书完整版
  • 类型:JS大小:24.4 MB格式:PDF作者:Cody
立即下载

JS多个表单数据提交下的serialize()应用实例分析

本文实例讲述了JS多个表单数据提交下的serialize()应用。分享给大家供大家参考,具体如下:

在实际开发场景中,难免遇到需要多个表单的数据传递问题。

之所以要进行多表单的数据传递是因为可以进行数据分组,便于数据的维护。

这个时候,出于不依赖jquery的考虑,有一个原生js函数来解决这个问题无疑是最好的。而源自于《JavaScript高级程序设计》一书的serialize()函数就是解决这个问题的最好办法,该函数如下:

function serialize(form){
      var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
      for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
          case "select-one":
          case "select-multiple":
            if (field.name.length){
              for (j=0, optLen = field.options.length; j < optLen; j++){
                option = field.options[j];
                if (option.selected){
                  optValue = "";
                  if (option.hasAttribute){
                    optValue = (option.hasAttribute("value") ? option.value : option.text);
                  } else {
                    optValue = (option.attributes["value"].specified ? option.value : option.text);
                  }
                  parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                }
              }
            }
            break;
          case undefined:   //fieldset
          case "file":    //file input
          case "submit":   //submit button
          case "reset":    //reset button
          case "button":   //custom button
            break;
          case "radio":    //radio button
          case "checkbox":  //checkbox
            if (!field.checked){
              break;
            }
            /* falls through */
          default:
            //don't include form fields without names
            if (field.name.length){
              parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
            }
        }
      }
      console.log(parts);
      return parts.join("&");
}

对于读过《JavaScript高级程序设计》的小伙伴来说,这个函数肯定不陌生;

但是如果我们传递的是一个对象,那么这个函数显然就不符合要求,而在这个开发需求下,我们改下这个函数,改造后函数如下

function serialize(form){
      var parts = {},
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
      for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
          case "select-one":
          case "select-multiple":
            if (field.name.length){
              for (j=0, optLen = field.options.length; j < optLen; j++){
                option = field.options[j];
                if (option.selected){
                  optValue = "";
                  if (option.hasAttribute){
                    optValue = (option.hasAttribute("value") ? option.value : option.text);
                  } else {
                    optValue = (option.attributes["value"].specified ? option.value : option.text);
                  }
                  //将数据改为对象形式
                  Object.defineProperty(parts, encodeURIComponent(field.name), {
                    value:encodeURIComponent(optValue),
                    enumerable:true //为真表示可枚举,只有可枚举才能出现在JSON.stringify()转换的json数据中
                  });
                }
              }
            }
            break;
          case undefined:   //fieldset
          case "file":    //file input
          case "submit":   //submit button
          case "reset":    //reset button
          case "button":   //custom button
            break;
          case "radio":    //radio button
          case "checkbox":  //checkbox
            if (!field.checked){
              break;
            }
            /* falls through */
          default:
            //don't include form fields without names
            if (field.name.length){
              //构建对象
              Object.defineProperty(parts, encodeURIComponent(field.name), {
                    value:encodeURIComponent(field.value),
                    enumerable:true  //为真表示可枚举,只有可枚举才能出现在JSON.stringify()转换的json数据中
                  });
            }
        }
      }
      console.log(parts);
      return parts;
}

于是,表单数据改为对象显示。如果有多个表单将表单保存到一个数组之中,利用JSON.stringify()转为json格式,传给后端;

注意:

利用Object.defineProperty创建对象,要加上 enumerable:true,否则json格式中不会出现对应的对象数据。这个纯粹是JSON.stringify()的要求。

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

JS应用实例 相关电子书
学习笔记
网友NO.950295

jQuery ajax serialize() 方法使用示例

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title/title script src="Scripts/jquery-1.4.1.js" type="text/javascript"/script script type="text/jscript" // $(function () { // alert($("form").serialize()); // }) function btnClick() { alert($("form").serialize()); } /script /head body form divinput type="text" name="a" value="1" id="a" //div divinput type="text" name="b" value="2" id="b" //div divinput type="hidden" name="c" value="3" id="c" //div div textarea name="d" rows="8" cols="40"4/textarea /div divselect name="e" option value="5" selected="selected"5/option option value="6"6/option option value="7"7/option /select/div div input type="checkbox" name="f" value="8" id="f" / /div div input type="button" name="g" value="提交" id=……

网友NO.110011

jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法

序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 原因:.serialize()自动调用了encodeURIComponent方法将数据编码了 解决方法:调用decodeURIComponent(XXX,true);将数据解码 例如: var params = jQuery("#formId").serialize(); // http request parameters. params = decodeURIComponent(params,true); 以上所述是小编给大家介绍的jQuery使用serialize()序列化表单时出现中文乱码问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.316112

django自带serializers序列化返回指定字段的方法

django orm 有个defer方法,指定模型排除的字段。 如下返回的Queryset, 排除‘username', 'id'。 users=models.UserInfo.objects.defer('username','id')或users=models.UserInfo.objects.filter(...).defer('username','id') 再如下,使用django自带serializers进行序列,发现序列化的数据仍存在‘username', 'id'这两个字段。 data = serializers.serialize('json', users) 如何解决? 在使用django自带serializers时,添加fields选项,将不需要的字段放入即可: users=models.UserInfo.objects.all() data = serializers.serialize('json', users, fields=('username', 'id')) 以上这篇django自带serializers序列化返回指定字段的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.310615

jquery.serialize() 函数语法及简单实例

jQuery - serialize() 方法 W3School给出的定义与用法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 语法 $(selector).serialize()详细说明 .serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。 ------------------------- 分割线 ---------------------- serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串。 serialize()函数常用于将表单内容序列化,以便用于AJAX提交。 该函数主要根据用于提交的有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。 该函数不会序列化不需要……

网友NO.952791

详解Python 序列化Serialize 和 反序列化Deserialize

详解Python 序列化Serialize 和 反序列化Deserialize 序列化 (serialization) 序列化是将对象状态转换为可保持或传输的格式的过程。与序列化相对的是反序列化, 它将流转换为对象。这两个过程结合起来,可以轻松地存储和传输数据。 序列化和反序列化的目的 1、以某种存储形式使自定义对象持久化; 2、将对象从一个地方传递到另一个地方。 3、使程序更具维护性 序列化   由于存在于内存中的对象都是暂时的,无法长期驻存,为了把对象的状态保持下来,这时需要把对象写入到磁盘或者其他介质中,这个过程就叫做序列化。 反序列化   反序列化恰恰是序列化的反向操作,也就是说,把已存在在磁盘或者其他介质中的对象,反序列化(读取)到内存中,以便后续操作,而这个过程就叫做反序列化。   概括性来说序列化是指将对象实例的状态存储到存……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

版权投诉 / 书籍推广 / 赞助:QQ:520161757