当前位置: 首页 > Web前端 > HTML

系统学习前端表单序列化

时间:2023-04-02 17:03:18 HTML

表单序列化一、概述随着Ajax的出现,表单序列化已经成为一种普遍的需求。我们先明确一下表单提交时浏览器是如何向服务器发送数据的。URL-encode表单域的名称和值(调用encodeURIComponent()方法),用&分隔,无论是get请求还是post请求,都是一样的Disabled表单域不发送,即如果disabled属性为true,仅发送选中的复选框和单选按钮。类型为reset和button的按钮不发送。多选选择框中的每一个选中的值在单选提交按钮表单中都是一个单独的条目,当点击提交按钮表单时,提交按钮的值也会被发送,否则提交按钮不会被发送。select元素的值是所选option元素的value属性的值。如果option元素没有value属性,则它是option元素的文本值。2.实现基于以上,我们可以实现一个表单的序列化。代码是对《JavaScript高级程序设计》FormScript一章的代码进行改进,增加参数校验,将form.elements转为数组,提高性能,完善多选框。相同参数名的值被合并,已经测试过了。如果options没有HTML的value属性,读取options的value属性会等于它的text属性(测试浏览器IE8,chrome)functionserialize(form){//参数校验if(!form&&form.nodeName.toUpperCase()!="FORM"){thrownewError("无效参数");}varencode=window.encodeURIComponent,slice=Array.prototype.slice;varparams=[],i=0,fields=slice.call(form.elements),len=fields.length,el,type;for(;i