纯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:/ ...
随机推荐
- 动态使用webservice,以及含有ref类型的参数的问题
public class WSHelper { /// < summary> /// 动态调用web服务 /// < /summary> /// < param name ...
- 鸭子类型duck typing(动态)
在程序设计中,鸭子类型(duck typing)是动态类型的一种风格.在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由当前方法和属性的集合决定.这个概念的名字来源于由Ja ...
- Asp.NET获取文件及其路径
[相对路径] Request.ApplicationPath /src Path.GetDirectoryName(HttpContext.Current.Request.RawUrl ) //s ...
- MySQL约束
MySQL中约束保存在information_schema数据库的table_constraints中,可以通过该表查询约束信息: 常用5种约束: not null: 非空约束,指定某列不为空 uni ...
- 首页的sitecontent地址
当无法出现工具栏时,利用url地址,可以方便直接进入sitecontent http://sp2013/sites/bentest/_layouts/15/viewlsts.aspx
- SignalR: The new old thing
As you can see, this is my first blog posted in cnblog. If you find any mistake, don’t hesitate to t ...
- android线程池ThreadPoolExecutor的理解
android线程池ThreadPoolExecutor的理解 线程池 我自己理解看来.线程池顾名思义就是一个容器的意思,容纳的就是ThreadorRunable, 注意:每一个线程都是需要CPU分配 ...
- 【转】浅析Windows编程的剪贴板
摘要: 本文对Windows剪贴板机制作了深入.全面的阐述,具体内容包括:文本.位图.DSP.自定义格式剪贴板的使用和多数据项和延迟提交技术. 关键词: VC++6.0: 剪贴板机制:数据格式:延迟提 ...
- 什么是NSTimer
本文主要是介绍什么是NSTimer,具体使用请参考上一篇博客. 1.什么是NSTimer? NSTimer就是timer就是一个能在从现在开始的后面的某一个时刻或者周期性的执行我们指定的方法的对象. ...
- CSS边框属性二---border-images
border-images 属性 主要用border-images 属性来制作自适应按钮和tab标签&自适应边框. 例子: border-images:url("img.png&qu ...