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

  • 时间:
  • 9971人关注

这篇文章主要介绍了JS多个表单数据提交下的serialize()应用,接合实例形式分析了原生javascript实现多个表单提交时serialize操作相关使用技巧与操作注意事项,需要的朋友可以参考下,另外这篇文章主要知识点是关于JS、表单、数据提交、serialize、JS应用实例的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:JS应用实例
  • 编辑整理:孟和通
  • 教程字数:2888字节
  • 阅读时间:大概13分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • JSON-handle
  • Quick Javascript Switcher
  • Vue.js devtools
  • Google表单
  • 本文实例讲述了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程序设计有所帮助。


    上一篇:JS实现给数组对象排序的实例代码

    下一篇:js单例模式原理与用法简要说明

    相关内容

    • java与jsp的区别

      java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。 JSP和JAVA的区别,JSP算是JAVA一种技术吧,用在网页编程上,因为JAVA不能直接写在html上,但jsp能,jsp就是Servlet程序,当JSP收到客户的请求时,SCRIPTLET(脚本小程序)就会被执行,脚本段将被插入到JSP所生成的目标Servlet的Serivce函数中.所以脚本小程序不能写方法(函数),因为方法里面不能再有方法了.JSP的执行过程。 1、首先,JAVA是一门

      12-17JSP和JAVA的区别

      阅读更多
    • js可以替代java吗

      nodejs不会替代java。在虚拟机层面 node.js 基于的v8 VM看起来很不错,但和Java的 VM 一比,差距甚远。在服务器领域,特别是拥有众多 CPU 和大量内存的环境下,Java 的 VM 几乎是你能在地球上找到的最好的 VM。而v8既不能充分利用多CPU的性能,也不能将内存充分利用。Node.js是从前端转过来的,恰恰前端是计算机领域少数几个不需要计算机体系知识就能胜任的职业。想要真正做到像java那样水平,计算机体系性的知识必不可少。Node.js特别适合中小型系统的快速开

      12-13js能替代java吗

      阅读更多
    • JAVA直接访问jsp页面报404吗

      404表示的是路径未找到错误,解决办法如下: 【解决方法】 1、首先看错误信息 第一行 2、这里有出错的路径,也就是哪个找不到的路径 3、然后回程序中找调用这个路径的地方,确定路径写的是否正确,是否可达。 JSP页面运行时报的404错处理方法如下: 保证在你的Console窗口中看不到任何起到影响的Exception(jsp在编译的时候会先检查web.xml文件,如果全部正常,没有任何Exception的话,才会成功部署到.metadata\.plugins\org.eclipse.wst.server.

      12-12JAVA访问jsp页面报404吗

      阅读更多
    • jsp实质是java程序对吗

      JSP页面在本质上就是Servlet程序,当JSP页面在首次被访问时,Web容器就会将JSP页面转化为Servlet,只需要做一次。如index.jsp在首次被访问时,Web容器会将其翻译成一个index_jsp.java文件,即Servlet代码。 JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言。实质上是通过调用JSP引擎来生成java文件,再将这个java文件编译成类文件,并执行这个类文件以生成动态

      12-05jsp实质是java程序吗

      阅读更多
    • jsp文件就是java文件吗

      jsp文件不是java文件,java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。jsp是一个网页页面,相当于复杂的html。其中可以插入script代码,当然也可以插入java代码。j ava是一个类文件,在java学习初期主要是写java文件的。如果不写页面的话是没有页面效果的。 1、JSP的写的代码,不利于代码重用。JAVA本来就是面向对象的语言,但在JSP中,体现不出来代码重用的优势。如果把一些通用的代码写成JAVA文件,就方便了很多,例

      12-02jsp文件是java文件吗

      阅读更多
    • 21天学通HTML+CSS+JavaScript Web开发

      21天学通HTML+CSS+JavaScript Web开发

      21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

      大小:104.9 MB前端

      点击下载
    • 你不知道的JavaScript 下卷

      你不知道的JavaScript 下卷

      本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

      大小:7 MBJavaScript

      点击下载
    • JavaScript框架设计

      JavaScript框架设计

      JavaScript,框架设计

      大小:286.4 MBjs框架

      点击下载
    • JavaScript核心技术开发解密

      JavaScript核心技术开发解密

      这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

      大小:68.4 MBJavaScript

      点击下载
    • 完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

      完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

      完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线,开发物联网应用、手机App和操控微电脑

      大小:60.8 MB物联网

      点击下载
    • 精通JavaScript

      精通JavaScript

      精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

      大小:33.5 MBJavaScript

      点击下载
    • JavaScript函数式编程指南

      JavaScript函数式编程指南

      这书关键介绍怎样根据ECMAScript6将函数式编程关键技术于编码,以减少编码的多元性。这书共三一部分內容。*一部分函数式观念是为第二一部分的学习培训作铺垫的,这一部分引入了对函数式

      大小:12.79 MBjs函数

      点击下载

    学习笔记