使用方式:

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. 初识jsp

    复习: 1.servlet生命周期: (1)默认是以第一次请求的时候创建并初始化Servlet,而且只做一次.(构造函数 init()) web.xml(配置后,是可以达到在服务启动后,立刻进行ser ...

  2. webrtc学习——RTCPeerConnection

    The RTCPeerConnection interface represents a WebRTC connection and handles efficient streaming of da ...

  3. 转载:在Visual Studio 2013中管理中国特色的社会主义Windows Azure

    原文链接: http://www.pstips.net/get-azurechinacloud-settings.html 谷歌被豪迈地放弃了中国市场,微软仍旧在中国市场摸爬滚打,跪着挣钱.其中私人定 ...

  4. 最近在学习UDP方面的通信,找到一个很棒的博客

    http://blog.csdn.net/kesalin/article/details/8798039

  5. excel导入 导出 兼容各个版本服务器不装EXCEL也可以

    给出 demo源码: http://pan.baidu.com/s/1hqGMudY 提取码:pw4n首先要引用 NPOI.dll (可在网上下载!) //导入 public void OnSubmi ...

  6. cordova安装中的坑

    1.安装android环境直接略过! 2.安装node.js直接略过! 3.安装cordova npm install -g cordova npm uninstall cordova  -g(这条是 ...

  7. PHP学习笔记(七)

    <wordpress 50个过滤钩子> 11-20 11.gettext: 过滤wordpress的翻译数据. 在wordpress中,使用__(), _e(), _x(), _ex(), ...

  8. java新手笔记16 面积

    1.图形类 package com.yfs.javase; public class Shape { //计算面积方法 public double getArea() { System.out.pri ...

  9. css样式 第6节

    程序员语录: 不要太刻意地把写程序这件事和挣钱挂起来,局限了你挣钱的本事 <html> <head> <title>网页样式</title> </ ...

  10. myeclipse启动报JVM terminated. Exit code=1

    报错信息如图: 解决办法: 删除当前workspaces下文件夹,路径为:%Workspaces%/.metadata/.plugins/org.eclipse.core.runtime