使用方式:

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发送的更多相关文章

  1. jQuery将form表单的数据封装成json对象

    /** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...

  2. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  3. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  4. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  5. js重置form表单

      CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...

  6. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  7. 第十七篇 JS验证form表单

    JS验证form表单   这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...

  8. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  9. 参数传递的四种形式----- URL,超链接,js,form表单

    什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...

随机推荐

  1. 微信公众号支付(一):获取用户openId

    一.获取apikey,appsecret与商户号 注册公众号.商户号 二.获取用户的OpenId 1.设置[授权回调页面域名] 官方解释:用户在网页授权页同意授权给公众号后,微信会将授权数据传给一个回 ...

  2. modelsim remote

    远程桌面登陆我的台式机上的账号,然后运行modelsim 出现该问题: Unable to checkout a viewer license necessary for use of the Mod ...

  3. js 注册手机摇动事件

    var rockModule = (function () { //监听手机摇动事件 if (window.DeviceMotionEvent) { window.addEventListener(' ...

  4. 程序员带你学习安卓开发-XML文档的创建与解析

    这是程序员带你学习安卓开发系列教程.本文章致力于面向对象程序员可以快速学习开发安卓技术. 上篇文章:程序员带你学习安卓开发系列-Android文件存储 因知识连贯性推荐关注头条号:做全栈攻城狮.从头开 ...

  5. JavaScript入门(6)

    一.if语句 if语句是基于条件成立才执行相应代码时使用的语句 语法: if(条件) {条件成立时执行代码} 注: if小写,大写字母IF会出错! 二.if...else语句(二选一) 语法: if( ...

  6. 【转】iOS屏幕适配

    一.iOS屏幕适配发展历程 设备 适配技术 4及以前(iPad未出) 直接用代码计算 有了iPad autoResizing 有不同屏幕的iPhone后 autoLayout 有更多不同屏幕的iPho ...

  7. C# 多线程(二) 线程同步基础

    本系列的第一篇简单介绍了线程的概念以及对线程的一些简单的操作,从这一篇开始讲解线程同步,线程同步是多线程技术的难点.线程同步基础由以下几个部分内容组成 1.同步要领(Synchronization E ...

  8. jQuery弹性滑块导航

    曾起何时在某网站上看到一弹性滑块导航的效果,瞬间被些效果吸引,开始以为是用FLASH实现的,但查源代码发现用的是JQuery缓动效果. 今天心血来潮想拿这个效果练练手.也看看这段时间学习JS及jque ...

  9. ERROR 1045 (28000): Access denied for user 'root'@'localhost'

    # /etc/init.d/mysql stop# mysqld_safe --user=mysql --skip-grant-tables --skip-networking &# mysq ...

  10. Leaflet交流

    GIS科研网 Leaflet交流 谢绝转载 http://www.3sbase.com欢迎加群交流  108299288 http://www.3sbase.com/3sbase/webgistest ...