纯js将form表单的数据封装成json 以便于ajax发送
使用方式:
var json = form2Json("formId");//这里的参数是form表单的id值
form2json.js
- function form2Json(formName){
- var form=document.getElementById(formName);
- var sb=new StringBuilder();var rcs=new Map();
- for ( var i = 0; i < form.elements.length; i++){
- var element = form.elements[i]; var name = element.name;
- if (typeof (name) === "undefined" || (name === null) || (name.length === 0)){continue;}
- var tagName = element.tagName;
- if(tagName ==='INPUT'||tagName === 'TEXTAREA'){var type = element.type;
- if ((type === 'text')||(type === 'password') || (type === 'hidden') || (tagName === 'TEXTAREA')){
- sb.append("\""+name+"\":\""+encodeURIComponent(element.value.replace(/\r\n/ig,""))+"\"");
- }else if((type === 'checkbox') || (type === 'radio')){
- rcs.putOverride(name,type);
- }else{continue;}
- }else if (tagName === 'SELECT'){var oc = element.options.length;
- for ( var j = 0; j <oc; j++){
- if (element.options[j].selected){sb.append("\""+name+"\":\""+(element.value)+"\"");}
- }
- }
- }
- if(rcs.size()>0){
- for(var i=0;i<rcs.size();i++){
- var r=rcs.element(i);var radio="";
- var d=document.getElementsByName(r.key);
- if(r.value==="radio"){
- for(j=0;j<d.length;j++){
- if(d[j].checked){radio=d[j].value;}
- }
- }else{
- for(j=0;j<d.length;j++){
- if(d[j].checked){radio+=","+d[j].value;}
- }
- radio.substr(1);
- }
- sb.append("\""+r.key+"\":\""+radio+"\"");
- }
- }
- return "{"+sb.toJsonString()+"}";
- }
- function StringBuilder(){
- this._element_ = new Array();
- this.append = function(item) {
- this._element_.push(item);
- }
- this.toString = function() {
- return this._element_.join("");
- }
- this.toJsonString = function() {
- return this._element_.join(",");
- }
- this.join = function(separator) {
- return this._element_.join(separator);
- }
- this.length = function() {
- return this._element_.length;
- }
- }
- function Map() {
- this.elements = new Array();
- // 获取MAP元素个数
- this.size = function() {
- return this.elements.length;
- }
- // 判断MAP是否为空
- this.isEmpty = function() {
- return (this.elements.length < 1);
- }
- // 删除MAP所有元素
- this.clear = function() {
- this.elements = new Array();
- }
- // 向MAP中增加元素(key, value)
- this.put = function(_key, _value) {
- this.elements.push({key : _key,value : _value});
- }
- //增加元素并覆盖
- this.putOverride = function(_key,_value){
- this.remove(_key);
- this.put(_key,_value);
- }
- // 删除指定KEY的元素,成功返回True,失败返回False
- this.remove = function(_key) {
- var bln = false;
- try {
- for (i = 0; i < this.elements.length; i++) {
- if (this.elements[i].key == _key) {
- this.elements.splice(i, 1);
- return true;
- }
- }
- } catch (e) {
- bln = false;
- }
- return bln;
- }
- // 获取指定KEY的元素值VALUE,失败返回NULL
- this.get = function(_key) {
- try {
- for (i = 0; i < this.elements.length; i++) {
- if (this.elements[i].key == _key) {
- return this.elements[i].value;
- }
- }
- } catch (e) {
- return null;
- }
- }
- // 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
- this.element = function(_index) {
- if (_index < 0 || _index >= this.elements.length) {
- return null;
- }
- return this.elements[_index];
- }
- // 判断MAP中是否含有指定KEY的元素
- this.containsKey = function(_key) {
- var bln = false;
- try {
- for (i = 0; i < this.elements.length; i++) {
- if (this.elements[i].key == _key) {
- bln = true;
- }
- }
- } catch (e) {
- bln = false;
- }
- return bln;
- }
- // 判断MAP中是否含有指定VALUE的元素
- this.containsValue = function(_value) {
- var bln = false;
- try {
- for (i = 0; i < this.elements.length; i++) {
- if (this.elements[i].value == _value) {
- bln = true;
- }
- }
- } catch (e) {
- bln = false;
- }
- return bln;
- }
- // 获取MAP中所有VALUE的数组(ARRAY)
- this.values = function() {
- var arr = new Array();
- for (i = 0; i < this.elements.length; i++) {
- arr.push(this.elements[i].value);
- }
- return arr;
- }
- // 获取MAP中所有KEY的数组(ARRAY)
- this.keys = function() {
- var arr = new Array();
- for (i = 0; i < this.elements.length; i++) {
- arr.push(this.elements[i].key);
- }
- return arr;
- }
- }
纯js将form表单的数据封装成json 以便于ajax发送的更多相关文章
- jQuery将form表单的数据封装成json对象
/** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...
- JS 提交form表单
源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
- js重置form表单
CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...
- js验证form表单示例
js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下: <script type="text/javascript& ...
- 第十七篇 JS验证form表单
JS验证form表单 这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...
- js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
- 参数传递的四种形式----- URL,超链接,js,form表单
什么时候用GET, 查,删, 什么时候用POST,增,改 (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...
随机推荐
- ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值
检查插入的值是否大于该字段数据类型约束的长度. 这个异常是指,用户向数据库执行插入数据操作时,某条数据的某个字段值过长,如 果是varchar2类型的,当长度超过2000,--4000(最大值)之间的 ...
- javascript-03
1.Object |-1.var 变量=new Object(); |-变量.自定义的属性='值'; |-变量.自定义名称=function(){} |-2.var ...
- Android开发环境搭建(2015年8月更新)
1. 下载和安装Android SDK Android的官方站点是http://www.android.com: 登录https://developer.android.com/intl/zh-cn ...
- Apache+Tomcat +mod_proxy集群负载均衡及session
序言: 在玩Apache+Tomcat +mod_jk集群负载均衡及session的时候发现,还有一种方式可以实现,就是网上各位大牛们说的mod_proxy反向代理. 实在弄的我的知识细胞洋洋.实 ...
- JavaSE生成随机数
今天呢,老师讲了一下怎么用jvm实现随机数(本人对此很感兴趣),一个简单的随机100以内整数的代码如下: /** 生成随机数 */ import java.util.Random; public cl ...
- postgres 利用unique index代替 primay key
create UNIQUE INDEX uniq_index_piwik_log_action_idaction on piwik_log_action(idaction); 这样做的好处: 1. ...
- STL之优先队列
STL 中优先队列的使用方法(priority_queu) 基本操作: empty() 如果队列为空返回真 pop() 删除对顶元素 push() 加入一个元素 size() 返回优先队列中拥有的元素 ...
- 图像储存容器Mat[OpenCV 笔记11]
IplImage 与 Mat IplImage是OpenCV1中的图像存储结构体,基于C接口创建.在退出之前必须release,否则就会造成内存泄露.在一些只能使用C语言的嵌入式系统中,不得不使用. ...
- zoj 3686 A Simple Tree Problem (线段树)
Solution: 根据树的遍历道的时间给树的节点编号,记录下进入节点和退出节点的时间.这个时间区间覆盖了这个节点的所有子树,可以当做连续的区间利用线段树进行操作. /* 线段树 */ #pragma ...
- Scala - error: not found: value SortedMap
先 IMPORT!!!! scala> import scala.collection._import scala.collection._ scala> SortedMap(" ...