纯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:/ ...
随机推荐
- hihocoder 第一周 最长回文字串
题目1 : 最长回文子串 时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程 ...
- <!--[if lt IE]>
代码如下时 <!--[if lt IE9]> <script src="js/html5shiv.js"></script> <![end ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
- 封装一个ISortable接口
using System;/// <summary>/// 排序规范/// </summary>/// <typeparam name="T"> ...
- WEB开发时Browser控件得到C:\fakepath\ 的解决方式
IE9中JS获得文件上传控件的路径不对,为:C:\fakepath\ 原来要修改: 工具 -> Internet选项 -> 安全 -> 自定义级别 -> 将本地文件上载至服务 ...
- iOS开发——友盟分享
==========2016-01-29 更新=====刘成利 email:liu_cheng_li@qq.com========== 自己成功集成到公司的项目前,也已做了测试好的友盟分享demo 目 ...
- 【ADO.NET】6、SQLHelper简单封装
using System.Data.SqlClient;using System.Configuration;引用:System.Configuration 连接字符串放到配置文件中 新建一个类,写如 ...
- 忘记mysql的root密码
如果忘记root密码或其他用户密码,不要急,按下面操作即可.1. 编辑mysql主配置文件 my.cnfvim /etc/my.cnf 在[mysqld]字段下添加参数 skip-grant ...
- C#事件作用和用法
例如有下面的需求需要实现:程序主画面中弹出一个子窗口.此时主画面仍然可以接收用户的操作(子窗口是非模态的).子窗口上进行某些操作,根据操作的结果要在主画面上显示不同的数据. 即如下图所示: 大多数我们 ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...