javascript表單域與json數(shù)據(jù)間的交互第1/3頁(yè)
更新時(shí)間:2008年10月16日 23:08:27 作者:
找了幾個(gè)javascript的框架,都沒(méi)有找到我想要的:
提供函數(shù),把某個(gè)表單的所有域封裝成json數(shù)據(jù)格式的對(duì)象,唯有自己實(shí)現(xiàn)一個(gè)。
包括對(duì)象中有集合屬性、對(duì)象中引用其他對(duì)象屬性:
/**
**json對(duì)象數(shù)據(jù)設(shè)置到表單域中
*/
function jsonObjectToForm(form, jsonObject){
for(i = 0, max = form.elements.length; i < max; i++) {
e = form.elements[i];
eName = e.name;
if(eName.indexOf('.') > 0){
dotIndex = eName.indexOf('.');
parentName = eName.substring(0, dotIndex);
childName = eName.substring(dotIndex+1);
//迭代判斷eName,組裝成json數(shù)據(jù)結(jié)構(gòu)
eValue = iterValueFromJsonObject(jsonObject, parentName, childName);
}else{
eValue = jsonObject[eName];
}
if(eValue && eValue != "undefined" && eValue != "null"){
switch(e.type){
case 'checkbox':
case 'radio':
if(e.value == eValue){
e.checked = true;
}
break;
case 'hidden':
case 'password':
case 'textarea':
case 'text':
e.value = eValue;
break;
case 'select-one':
case 'select-multiple':
for(j = 0; j < e.options.length; j++){
op = e.options[j];
//alert("eName : " + eName + "; op value : " + op.value + "; eValue : " + eValue);
if(op.value == eValue){
op.selected = true;
}
}
break;
case 'button':
case 'file':
case 'image':
case 'reset':
case 'submit':
default:
}
}
}
}
/**
* json數(shù)組讀寫有兩種方式
* 1: a.bs[0].id
* 2: a["bs"][0]["id"]
* 把表單轉(zhuǎn)換成json數(shù)據(jù)格式
*/
function formToJsonObject(form){
var jsonObject = {};
for(i = 0, max = form.elements.length; i < max; i++) {
e = form.elements[i];
em = new Array();
if(e.type == 'select-multiple'){
for(j = 0; j < e.options.length; j++){
op = e.options[j];
if(op.selected){
em[em.length] = op.value;
}
}
}
switch(e.type){
case 'checkbox':
case 'radio':
if (!e.checked) { break; }
case 'hidden':
case 'password':
case 'select-one':
case 'select-multiple':
case 'textarea':
case 'text':
eName = e.name;
if(e.type == 'select-multiple'){
eValue = em;
}else{
eValue = e.value.replace(new RegExp('(["\\\\])', 'g'), '\\$1');
}
//判斷是否是對(duì)象類型數(shù)據(jù)
if(eName.indexOf('.') > 0){
dotIndex = eName.indexOf('.');
parentName = eName.substring(0, dotIndex);
childName = eName.substring(dotIndex+1);
//迭代判斷eName,組裝成json數(shù)據(jù)結(jié)構(gòu)
iterJsonObject(jsonObject, parentName, childName, eValue);
}else{
jsonObject[eName] = eValue;
}
break;
case 'button':
case 'file':
case 'image':
case 'reset':
case 'submit':
default:
}
}
return jsonObject;
}
/**
* 把表單元素迭代轉(zhuǎn)換成json數(shù)據(jù)
*/
function iterJsonObject(jsonObject, parentName, childName, eValue){
//pArrayIndex用于判斷元素是否是數(shù)組標(biāo)示
pArrayIndex = parentName.indexOf('[');
//判斷是否集合數(shù)據(jù),不是則只是對(duì)象屬性
if(pArrayIndex < 0){
var child = jsonObject[parentName];
if(!child){
jsonObject[parentName] = {};
}
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
iterJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
}else{
jsonObject[parentName][childName] = eValue;
}
}else{
pArray = jsonObject[parentName.substring(0, pArrayIndex)];
//若不存在js數(shù)組,則初始化一個(gè)數(shù)組類型
if(!pArray){
jsonObject[parentName.substring(0, pArrayIndex)] = new Array();
}
//取得集合下標(biāo),并判斷對(duì)應(yīng)下標(biāo)是否存在js對(duì)象
arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
if(!c){
jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex] = {};
}
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
iterJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
}else{
jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName] = eValue;
}
}
}
/**
* 迭代json數(shù)據(jù)對(duì)象設(shè)置到表單域中
*/
function iterValueFromJsonObject(jsonObject, parentName, childName){
//pArrayIndex用于判斷元素是否是數(shù)組標(biāo)示
pArrayIndex = parentName.indexOf('[');
//判斷是否集合數(shù)據(jù),不是則只是對(duì)象屬性
if(pArrayIndex < 0){
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
return iterValueFromJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
}else{
return jsonObject[parentName][childName]
}
}else{
pArray = jsonObject[parentName.substring(0, pArrayIndex)];
//取得集合下標(biāo),并判斷對(duì)應(yīng)下標(biāo)是否存在js對(duì)象
arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
return iterValueFromJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
}else{
return jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName]
}
}
}
復(fù)制代碼 代碼如下:
/**
**json對(duì)象數(shù)據(jù)設(shè)置到表單域中
*/
function jsonObjectToForm(form, jsonObject){
for(i = 0, max = form.elements.length; i < max; i++) {
e = form.elements[i];
eName = e.name;
if(eName.indexOf('.') > 0){
dotIndex = eName.indexOf('.');
parentName = eName.substring(0, dotIndex);
childName = eName.substring(dotIndex+1);
//迭代判斷eName,組裝成json數(shù)據(jù)結(jié)構(gòu)
eValue = iterValueFromJsonObject(jsonObject, parentName, childName);
}else{
eValue = jsonObject[eName];
}
if(eValue && eValue != "undefined" && eValue != "null"){
switch(e.type){
case 'checkbox':
case 'radio':
if(e.value == eValue){
e.checked = true;
}
break;
case 'hidden':
case 'password':
case 'textarea':
case 'text':
e.value = eValue;
break;
case 'select-one':
case 'select-multiple':
for(j = 0; j < e.options.length; j++){
op = e.options[j];
//alert("eName : " + eName + "; op value : " + op.value + "; eValue : " + eValue);
if(op.value == eValue){
op.selected = true;
}
}
break;
case 'button':
case 'file':
case 'image':
case 'reset':
case 'submit':
default:
}
}
}
}
/**
* json數(shù)組讀寫有兩種方式
* 1: a.bs[0].id
* 2: a["bs"][0]["id"]
* 把表單轉(zhuǎn)換成json數(shù)據(jù)格式
*/
function formToJsonObject(form){
var jsonObject = {};
for(i = 0, max = form.elements.length; i < max; i++) {
e = form.elements[i];
em = new Array();
if(e.type == 'select-multiple'){
for(j = 0; j < e.options.length; j++){
op = e.options[j];
if(op.selected){
em[em.length] = op.value;
}
}
}
switch(e.type){
case 'checkbox':
case 'radio':
if (!e.checked) { break; }
case 'hidden':
case 'password':
case 'select-one':
case 'select-multiple':
case 'textarea':
case 'text':
eName = e.name;
if(e.type == 'select-multiple'){
eValue = em;
}else{
eValue = e.value.replace(new RegExp('(["\\\\])', 'g'), '\\$1');
}
//判斷是否是對(duì)象類型數(shù)據(jù)
if(eName.indexOf('.') > 0){
dotIndex = eName.indexOf('.');
parentName = eName.substring(0, dotIndex);
childName = eName.substring(dotIndex+1);
//迭代判斷eName,組裝成json數(shù)據(jù)結(jié)構(gòu)
iterJsonObject(jsonObject, parentName, childName, eValue);
}else{
jsonObject[eName] = eValue;
}
break;
case 'button':
case 'file':
case 'image':
case 'reset':
case 'submit':
default:
}
}
return jsonObject;
}
/**
* 把表單元素迭代轉(zhuǎn)換成json數(shù)據(jù)
*/
function iterJsonObject(jsonObject, parentName, childName, eValue){
//pArrayIndex用于判斷元素是否是數(shù)組標(biāo)示
pArrayIndex = parentName.indexOf('[');
//判斷是否集合數(shù)據(jù),不是則只是對(duì)象屬性
if(pArrayIndex < 0){
var child = jsonObject[parentName];
if(!child){
jsonObject[parentName] = {};
}
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
iterJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
}else{
jsonObject[parentName][childName] = eValue;
}
}else{
pArray = jsonObject[parentName.substring(0, pArrayIndex)];
//若不存在js數(shù)組,則初始化一個(gè)數(shù)組類型
if(!pArray){
jsonObject[parentName.substring(0, pArrayIndex)] = new Array();
}
//取得集合下標(biāo),并判斷對(duì)應(yīng)下標(biāo)是否存在js對(duì)象
arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
if(!c){
jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex] = {};
}
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
iterJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
}else{
jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName] = eValue;
}
}
}
/**
* 迭代json數(shù)據(jù)對(duì)象設(shè)置到表單域中
*/
function iterValueFromJsonObject(jsonObject, parentName, childName){
//pArrayIndex用于判斷元素是否是數(shù)組標(biāo)示
pArrayIndex = parentName.indexOf('[');
//判斷是否集合數(shù)據(jù),不是則只是對(duì)象屬性
if(pArrayIndex < 0){
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
return iterValueFromJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
}else{
return jsonObject[parentName][childName]
}
}else{
pArray = jsonObject[parentName.substring(0, pArrayIndex)];
//取得集合下標(biāo),并判斷對(duì)應(yīng)下標(biāo)是否存在js對(duì)象
arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
dotIndex = childName.indexOf('.');
if(dotIndex > 0){
return iterValueFromJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
}else{
return jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName]
}
}
}
您可能感興趣的文章:
相關(guān)文章
js操作兩個(gè)json數(shù)組合并、去重,以及刪除某一項(xiàng)元素
這篇文章主要介紹了js操作兩個(gè)json數(shù)組合并、去重,以及刪除某一項(xiàng)元素,需要的朋友可以參考下2020-09-09js解析與序列化json數(shù)據(jù)(一)json.stringify()的基本用法
對(duì)象有兩個(gè)方法:stringify()和parse()。在最簡(jiǎn)單的情況下,這兩個(gè)方法分別用于把JavaScript對(duì)象序列化為JSON字符串和把JSON字符串解析為原生JavaScript2013-02-02半個(gè)小時(shí)學(xué)json(json傳遞示例)
這篇文章主要介紹了半個(gè)小時(shí)學(xué)json(json傳遞示例),主要包括一維數(shù)組與二維數(shù)組,需要的朋友可以參考下2016-12-12JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝
深拷貝就是完全拷貝一份新的對(duì)象,本文主要介紹了JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08