纯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:/ ...
随机推荐
- Bootstrap与tab组合,切换菜单实例
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- Apache Commons Beanutils对象属性批量复制(pseudo-singleton)
Apache Commons Beanutils为开源软件,可在Apache官网http://commons.apache.org/proper/commons-beanutils/download_ ...
- 别了 oi——一篇高三狗的滚粗遗言
/* 开始于2015年12月 结束于2016年11月 一年的oi生涯有很多值得怀念的事 还记得去年旺哥找我学oi 当时是一脸的蒙逼 要知道 高二才开始搞是很晚了 然而 也就是那一晚之后 许多事情都变了 ...
- 使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- iOS 获取当前媒体音量
#import <AVFoundation/AVAudioSession.h> AVAudioSession *audioSession = [AVAudioSession sharedI ...
- Mysql笔记【4】-查询操作
1.查询所有列数据 select * from 表名 一般情况下,除非使用表中所有字段,最好不要使用通配符 "*",如果不知道所需要的列名,可以使用*查询获取 2.带in关键字的查 ...
- ImageIcon图像处理相关测试【一些特殊的处理方式】
/*************以下源码通过测试******************************/ package cn.jason.ios.images; import java.awt.F ...
- java web-----servelet
1,定义servlet: 2,servlet生命周期: 3,HttpServlet常用方法: 4,servlet常用接口: 一,servlet定义: servlet是一个继承HttpServlet类的 ...
- java之表达式陷阱
String str1 = "Hello Java的长度:10"; String str2 = "Hello Java的长度:10"; String str3 ...