- 浏览: 27812 次
- 性别:
- 来自: 珠海
最新评论
-
fireinjava:
写的不错,不过我用的都是Bean2Json的情况 =.=
json数据与JAVA数据的转换 -
johncon:
getJSONStringcyf-123456 写道谢谢,写的 ...
json数据与JAVA数据的转换 -
cyf-123456:
谢谢,写的挺好,要是能够再把list对象转换成json对象传到 ...
json数据与JAVA数据的转换 -
wangr15:
不错不错
json数据与JAVA数据的转换 -
wesker0918:
受教了 谢谢
json数据与JAVA数据的转换
找了几个javascript的框架,都没有找到我想要的:
提供函数,把某个表单的所有域封装成json数据格式的对象,唯有自己实现一个。
包括对象中有集合属性、对象中引用其他对象属性:
/** **json对象数据设置到表单域中 */ 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数据结构 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数组读写有两种方式 * 1: a.bs[0].id * 2: a["bs"][0]["id"] * 把表单转换成json数据格式 */ 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'); } //判断是否是对象类型数据 if(eName.indexOf('.') > 0){ dotIndex = eName.indexOf('.'); parentName = eName.substring(0, dotIndex); childName = eName.substring(dotIndex+1); //迭代判断eName,组装成json数据结构 iterJsonObject(jsonObject, parentName, childName, eValue); }else{ jsonObject[eName] = eValue; } break; case 'button': case 'file': case 'image': case 'reset': case 'submit': default: } } return jsonObject; } /** * 把表单元素迭代转换成json数据 */ function iterJsonObject(jsonObject, parentName, childName, eValue){ //pArrayIndex用于判断元素是否是数组标示 pArrayIndex = parentName.indexOf('['); //判断是否集合数据,不是则只是对象属性 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数组,则初始化一个数组类型 if(!pArray){ jsonObject[parentName.substring(0, pArrayIndex)] = new Array(); } //取得集合下标,并判断对应下标是否存在js对象 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数据对象设置到表单域中 */ function iterValueFromJsonObject(jsonObject, parentName, childName){ //pArrayIndex用于判断元素是否是数组标示 pArrayIndex = parentName.indexOf('['); //判断是否集合数据,不是则只是对象属性 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)]; //取得集合下标,并判断对应下标是否存在js对象 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] } } }
欢迎大家讨论,最近在研究jsp页面纯净,只与js有关,但这将导致rich client
so bad 不知道有什么好的建议没
评论
38 楼
czwlucky
2008-11-05
没有用过DWR吗?它的util.js中有这样的方法,可以直接拿过来用.
37 楼
maximus.zhang
2008-11-03
<p>json对象设置表单的:</p>
<pre name='code' class='js'>/**
* iselect$ 选定 值为v 的选择下拉菜单o 的下拉项。
*/
function iselect$(o,v){
if(o && o.nodeName=="SELECT" && !o.disabled){
o.selectedIndex=-1;
if(o.type=="select-one"){
for(var z=0,L=o.length;z<L;z++){
if(o.options[z].value==v)
return o.selectedIndex=z;
}
}
else if(o.type=="select-multiple"){
if(!isArray(v))return false;
for(var z=0,L=o.length;z<L;z++){
if(inArray(o.options[z].value,v))
o.options[z].selected=true;
}
}
}
}
function icheck$(o,v){
if(o.length){
for(var z=0,L=o.length;z<L;z++){
if(o[z] && o[z].nodeName=="INPUT" && !o[z].disabled){
switch(o[z].type){
case 'radio':
if(o[z].value==v)return o[z].checked=true;
break;
case 'checkbox':
if(!isArray(v))return false;
if(inArray(o[z].value,v))
o[z].checked=true;
else
o[z].checked=false;
break;
}
}
}
}
else{
if(o&&o.nodeName=="INPUT"&&(o.type=="radio"||o.type=="checkbox") && !o.disabled){
if(o.value==v)return o.checked=true;
else return o.checked=o.defaultChecked;
}
}
}
/**
* 将json对象的属性及其值设置表单
*/
function setform$(o,f,skip){
var f=typeof(f)=='string'?$(f):(typeof(f)=="object"&&f)?f:me.forms[0], skip=ext$({},skip);
if(!f||f.nodeName!=="FORM")return;
if(o&&typeof o=="object"){
var an=(typeof(skip.name)=='string')?skip.name.toLowerCase().split(','):isArray(skip.name)?skip.name:[],
ae=(typeof(skip.elem)=='string')?skip.elem.toUpperCase().split(','):isArray(skip.elem)?skip.elem:[],
at=(typeof(skip.type)=='string')?skip.type.toLowerCase().split(','):isArray(skip.type)?skip.type:[];
for(var z in o){
if(!inArray(z,an)&&(f.elements[z]||(isArray(o[z])&&f.elements[z+'[]']))){
var el=f.elements[z]?f.elements[z]:isArray(o[z])?f.elements[z+'[]']:null;
if(!el.length&&!el.disabled&&!inArray(el.nodeName,ae)){
switch(el.nodeName){
case 'INPUT':
if(!inArray(el.type,at)){
switch(el.type){
case 'text':
case 'hidden':
case 'password':
el.value=o[z];
break;
case 'radio':
case 'checkbox':
icheck$(el,o[z]);
break;
}
}
break;
case 'TEXTAREA':
el.innerHTML=o[z];
break;
}
}
else if(el.length&&!inArray(el.nodeName,ae)){
if(el.nodeName=='SELECT'&&!el.disabled)iselect$(el,o[z]);
else if(el[0].nodeName=='INPUT'){
if(!inArray(el.type,at)){
switch(el[0].type){
case 'text':
case 'hidden':
case 'password':
for(var x=0,J=el.length;x<J;x++){
if(!el[x].disabled)
el[x].value=o[z][x]?o[z][x]:'';
}
break;
case 'radio':
case 'checkbox':
icheck$(el,o[z]);
break;
}
}
}
}
}
}
}
}</pre>
<p> </p>
<p>form对象转换为json数据格式的对象的应用偶是觉得这样在ajax取的send出数据之前可以比较容易扩展form的内容,把原本不在表单里的数据一起加入到转换后的对象里。</p>
<p>如用下面的函数来扩展或修改json对象。</p>
<pre name='code' class='js'>function ext$(o,O){
if('object'!=typeof(o)||'object'!=typeof(O)||!o||!O)return o;
for(var z in O){
o[z]=O[z];
}
return o;
}</pre>
<pre name='code' class='js'>/**
* iselect$ 选定 值为v 的选择下拉菜单o 的下拉项。
*/
function iselect$(o,v){
if(o && o.nodeName=="SELECT" && !o.disabled){
o.selectedIndex=-1;
if(o.type=="select-one"){
for(var z=0,L=o.length;z<L;z++){
if(o.options[z].value==v)
return o.selectedIndex=z;
}
}
else if(o.type=="select-multiple"){
if(!isArray(v))return false;
for(var z=0,L=o.length;z<L;z++){
if(inArray(o.options[z].value,v))
o.options[z].selected=true;
}
}
}
}
function icheck$(o,v){
if(o.length){
for(var z=0,L=o.length;z<L;z++){
if(o[z] && o[z].nodeName=="INPUT" && !o[z].disabled){
switch(o[z].type){
case 'radio':
if(o[z].value==v)return o[z].checked=true;
break;
case 'checkbox':
if(!isArray(v))return false;
if(inArray(o[z].value,v))
o[z].checked=true;
else
o[z].checked=false;
break;
}
}
}
}
else{
if(o&&o.nodeName=="INPUT"&&(o.type=="radio"||o.type=="checkbox") && !o.disabled){
if(o.value==v)return o.checked=true;
else return o.checked=o.defaultChecked;
}
}
}
/**
* 将json对象的属性及其值设置表单
*/
function setform$(o,f,skip){
var f=typeof(f)=='string'?$(f):(typeof(f)=="object"&&f)?f:me.forms[0], skip=ext$({},skip);
if(!f||f.nodeName!=="FORM")return;
if(o&&typeof o=="object"){
var an=(typeof(skip.name)=='string')?skip.name.toLowerCase().split(','):isArray(skip.name)?skip.name:[],
ae=(typeof(skip.elem)=='string')?skip.elem.toUpperCase().split(','):isArray(skip.elem)?skip.elem:[],
at=(typeof(skip.type)=='string')?skip.type.toLowerCase().split(','):isArray(skip.type)?skip.type:[];
for(var z in o){
if(!inArray(z,an)&&(f.elements[z]||(isArray(o[z])&&f.elements[z+'[]']))){
var el=f.elements[z]?f.elements[z]:isArray(o[z])?f.elements[z+'[]']:null;
if(!el.length&&!el.disabled&&!inArray(el.nodeName,ae)){
switch(el.nodeName){
case 'INPUT':
if(!inArray(el.type,at)){
switch(el.type){
case 'text':
case 'hidden':
case 'password':
el.value=o[z];
break;
case 'radio':
case 'checkbox':
icheck$(el,o[z]);
break;
}
}
break;
case 'TEXTAREA':
el.innerHTML=o[z];
break;
}
}
else if(el.length&&!inArray(el.nodeName,ae)){
if(el.nodeName=='SELECT'&&!el.disabled)iselect$(el,o[z]);
else if(el[0].nodeName=='INPUT'){
if(!inArray(el.type,at)){
switch(el[0].type){
case 'text':
case 'hidden':
case 'password':
for(var x=0,J=el.length;x<J;x++){
if(!el[x].disabled)
el[x].value=o[z][x]?o[z][x]:'';
}
break;
case 'radio':
case 'checkbox':
icheck$(el,o[z]);
break;
}
}
}
}
}
}
}
}</pre>
<p> </p>
<p>form对象转换为json数据格式的对象的应用偶是觉得这样在ajax取的send出数据之前可以比较容易扩展form的内容,把原本不在表单里的数据一起加入到转换后的对象里。</p>
<p>如用下面的函数来扩展或修改json对象。</p>
<pre name='code' class='js'>function ext$(o,O){
if('object'!=typeof(o)||'object'!=typeof(O)||!o||!O)return o;
for(var z in O){
o[z]=O[z];
}
return o;
}</pre>
36 楼
maximus.zhang
2008-11-03
<p>今年初在做一个包含表单,列表,分页的ajax应用的时候写了个差不多功能的函数。</p>
<pre name='code' class='js'>/**
* 函数jsonF$ 将表单对象所包含的控件的内容转换成json对象。
* 参数1 为表单对象或表单对象的id;
* 参数2 为表单对象中要略过的控件,可为“控件name属性”,“控件元素名”,控件type
*/
function jsonF$(O,skip){/* skip={'name'|['name'],'elem'|['elem'],'type'|['type']} */
if(!O)return;
var O=typeof(O)=='string'?$(O):O, skip=ext$({},skip), o={};
if(typeof(O)=='object'){
if(!O.nodeName){return O;}
if(O.nodeName=='FORM'){
var an=(typeof(skip.name)=='string')?skip.name.toLowerCase().split(','):isArray(skip.name)?skip.name:[],
ae=(typeof(skip.elem)=='string')?skip.elem.toUpperCase().split(','):isArray(skip.elem)?skip.elem:[],
at=(typeof(skip.type)=='string')?skip.type.toLowerCase().split(','):isArray(skip.type)?skip.type:[];
for(var x=0,L=O.length;x<L;x++){
if(!inArray(O[x].nodeName,ae)&& !O[x].disabled &&O[x].name&&O[x].name!=''&&!inArray(O[x].name.toLowerCase(),an)){
switch(O[x].nodeName){
case 'INPUT':
if(!inArray(O[x].type,at)){
switch(O[x].type){
case 'text':
case 'hidden':
case 'password':
if(/%5B%5D$|\[\]$/i.test(O[x].name)){
var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
if(o.hasOwnProperty(N)){
o[N].push(O[x].value);
}else{
o[N]=[O[x].value];
}
}else{
o[O[x].name]=O[x].value;
}
break;
case 'radio':
case 'checkbox':
if(O[x].checked){
if(/%5B%5D$|\[\]$/i.test(O[x].name)){
var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
if(o.hasOwnProperty(N))
o[N].push(O[x].value);
else
o[N]=[O[x].value];
}
else
o[O[x].name]=O[x].value;
}
break;
}
}
break;
case 'TEXTAREA':
if(/%5B%5D$|\[\]$/i.test(O[x].name))
o[O[x].name.replace(/%5B%5D$|\[\]$/i,'')]=[O[x].value];
else
o[O[x].name]=O[x].value;
break;
case 'SELECT':
for(var z=0,J=O[x].length;z<J;z++){
var Oz=O[x].options[z];
if(Oz.selected){
if(/%5B%5D$|\[\]$/i.test(O[x].name)){
var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
if(o.hasOwnProperty(N))
o[N].push(Oz.value);
else
o[N]=[Oz.value];
}
else
o[O[x].name]=Oz.value;
}
}
break;
}
}
}
}
}
return o;
}
</pre>
<p> 中间有用到其他的函数。偶某些个人编写代码的习惯不是每个人都能够习惯的。</p>
<pre name='code' class='js'>/**
* 函数jsonF$ 将表单对象所包含的控件的内容转换成json对象。
* 参数1 为表单对象或表单对象的id;
* 参数2 为表单对象中要略过的控件,可为“控件name属性”,“控件元素名”,控件type
*/
function jsonF$(O,skip){/* skip={'name'|['name'],'elem'|['elem'],'type'|['type']} */
if(!O)return;
var O=typeof(O)=='string'?$(O):O, skip=ext$({},skip), o={};
if(typeof(O)=='object'){
if(!O.nodeName){return O;}
if(O.nodeName=='FORM'){
var an=(typeof(skip.name)=='string')?skip.name.toLowerCase().split(','):isArray(skip.name)?skip.name:[],
ae=(typeof(skip.elem)=='string')?skip.elem.toUpperCase().split(','):isArray(skip.elem)?skip.elem:[],
at=(typeof(skip.type)=='string')?skip.type.toLowerCase().split(','):isArray(skip.type)?skip.type:[];
for(var x=0,L=O.length;x<L;x++){
if(!inArray(O[x].nodeName,ae)&& !O[x].disabled &&O[x].name&&O[x].name!=''&&!inArray(O[x].name.toLowerCase(),an)){
switch(O[x].nodeName){
case 'INPUT':
if(!inArray(O[x].type,at)){
switch(O[x].type){
case 'text':
case 'hidden':
case 'password':
if(/%5B%5D$|\[\]$/i.test(O[x].name)){
var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
if(o.hasOwnProperty(N)){
o[N].push(O[x].value);
}else{
o[N]=[O[x].value];
}
}else{
o[O[x].name]=O[x].value;
}
break;
case 'radio':
case 'checkbox':
if(O[x].checked){
if(/%5B%5D$|\[\]$/i.test(O[x].name)){
var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
if(o.hasOwnProperty(N))
o[N].push(O[x].value);
else
o[N]=[O[x].value];
}
else
o[O[x].name]=O[x].value;
}
break;
}
}
break;
case 'TEXTAREA':
if(/%5B%5D$|\[\]$/i.test(O[x].name))
o[O[x].name.replace(/%5B%5D$|\[\]$/i,'')]=[O[x].value];
else
o[O[x].name]=O[x].value;
break;
case 'SELECT':
for(var z=0,J=O[x].length;z<J;z++){
var Oz=O[x].options[z];
if(Oz.selected){
if(/%5B%5D$|\[\]$/i.test(O[x].name)){
var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
if(o.hasOwnProperty(N))
o[N].push(Oz.value);
else
o[N]=[Oz.value];
}
else
o[O[x].name]=Oz.value;
}
}
break;
}
}
}
}
}
return o;
}
</pre>
<p> 中间有用到其他的函数。偶某些个人编写代码的习惯不是每个人都能够习惯的。</p>
35 楼
ja3939
2008-10-29
学习一下!
34 楼
johncon
2008-10-22
xxpniu 写道
我觉得参考下ext的楼主能搞的不错
怎么讲呢。。。 其实本人不大愿意大量使用js,但要实现效果,又不得不使用js
rich client。。。
33 楼
johncon
2008-10-22
chhj_292 写道
总结了这么多问题,学术意义大于实际意义
确实,集思广益
32 楼
xxpniu
2008-10-21
我觉得参考下ext的楼主能搞的不错
31 楼
chhj_292
2008-10-21
总结了这么多问题,学术意义大于实际意义
30 楼
johncon
2008-10-18
softsoft 写道
prototype中form.serialize有什么问题呢? LZ不用? 实际上正如小胖提到的checkbox、multiSelect这些里面都有一些比较特殊的处理 要保持整个页面form和服务器端的某种程度上的一致,单靠一次json来做,很费力 但是交互多了也不太好,听听大家意见
prototype的form.serialize并不能满足我的要求,我是希望能够级联,如:a.b[0].id
29 楼
lobbychmd
2008-10-16
<div class='quote_title'>slaser 写道</div>
<div class='quote_div'>
<p>走得再远点,HTML元素转化为后台json对象不一定要按name或者id来进行绑定的。因为html元素是面向界面的,而json对象可能是个领域对象。</p>
<p>比如:</p>
<pre name='code' class='js'>var customer1 = {"id":0,"name":"adidas"};</pre>
<pre name='code' class='html'><div id="custome-id"></div>
<input id="customer-name" type="text"></pre>
<p> 应该能允许,customer1的id送到customer-id中,而"adidas"显示于customer-name里面。</p>
<p>完成这个功能不应该靠id值的默认匹配,而是应该有类似的绑定机制,比如:</p>
<p> </p>
<pre name='code' class='js'>BindingFactory.bind("custome-id",customer1.id);
BindingFactory.bind("custome-name",customer1.name);</pre>
<p>这样html里面元素的id可以和json里面的结构往不同的方向演化。json对象也可以成为领域对象和服务器进行交互。</p>
</div>
<p> </p>
<p>这样程序就复杂了嘛,按rails 的约定大于配置,最好就是名字刚好一样。所以用name 不用 id,因为name 是可以重复的。</p>
<div class='quote_div'>
<p>走得再远点,HTML元素转化为后台json对象不一定要按name或者id来进行绑定的。因为html元素是面向界面的,而json对象可能是个领域对象。</p>
<p>比如:</p>
<pre name='code' class='js'>var customer1 = {"id":0,"name":"adidas"};</pre>
<pre name='code' class='html'><div id="custome-id"></div>
<input id="customer-name" type="text"></pre>
<p> 应该能允许,customer1的id送到customer-id中,而"adidas"显示于customer-name里面。</p>
<p>完成这个功能不应该靠id值的默认匹配,而是应该有类似的绑定机制,比如:</p>
<p> </p>
<pre name='code' class='js'>BindingFactory.bind("custome-id",customer1.id);
BindingFactory.bind("custome-name",customer1.name);</pre>
<p>这样html里面元素的id可以和json里面的结构往不同的方向演化。json对象也可以成为领域对象和服务器进行交互。</p>
</div>
<p> </p>
<p>这样程序就复杂了嘛,按rails 的约定大于配置,最好就是名字刚好一样。所以用name 不用 id,因为name 是可以重复的。</p>
28 楼
slaser
2008-10-15
<p>走得再远点,HTML元素转化为后台json对象不一定要按name或者id来进行绑定的。因为html元素是面向界面的,而json对象可能是个领域对象。</p>
<p>比如:</p>
<pre name='code' class='js'>var customer1 = {"id":0,"name":"adidas"};</pre>
<pre name='code' class='html'><div id="custome-id"></div>
<input id="customer-name" type="text"></pre>
<p> 应该能允许,customer1的id送到customer-id中,而"adidas"显示于customer-name里面。</p>
<p>完成这个功能不应该靠id值的默认匹配,而是应该有类似的绑定机制,比如:</p>
<p> </p>
<pre name='code' class='js'>BindingFactory.bind("custome-id",customer1.id);
BindingFactory.bind("custome-name",customer1.name);</pre>
<p>这样html里面元素的id可以和json里面的结构往不同的方向演化。json对象也可以成为领域对象和服务器进行交互。</p>
<p>比如:</p>
<pre name='code' class='js'>var customer1 = {"id":0,"name":"adidas"};</pre>
<pre name='code' class='html'><div id="custome-id"></div>
<input id="customer-name" type="text"></pre>
<p> 应该能允许,customer1的id送到customer-id中,而"adidas"显示于customer-name里面。</p>
<p>完成这个功能不应该靠id值的默认匹配,而是应该有类似的绑定机制,比如:</p>
<p> </p>
<pre name='code' class='js'>BindingFactory.bind("custome-id",customer1.id);
BindingFactory.bind("custome-name",customer1.name);</pre>
<p>这样html里面元素的id可以和json里面的结构往不同的方向演化。json对象也可以成为领域对象和服务器进行交互。</p>
27 楼
softsoft
2008-10-15
prototype中form.serialize有什么问题呢?
LZ不用?
实际上正如小胖提到的checkbox、multiSelect这些里面都有一些比较特殊的处理
要保持整个页面form和服务器端的某种程度上的一致,单靠一次json来做,很费力
但是交互多了也不太好,听听大家意见
LZ不用?
实际上正如小胖提到的checkbox、multiSelect这些里面都有一些比较特殊的处理
要保持整个页面form和服务器端的某种程度上的一致,单靠一次json来做,很费力
但是交互多了也不太好,听听大家意见
26 楼
March
2008-10-15
这个思想不错,代码质量如何暂不管它,有空来研究下
25 楼
lobbychmd
2008-10-15
只获取form 的数据应该是历史原因吧,以前js 不流行时不是只自动提交form 的input 内容么。当时好像也没有dom 的概念
象级联的话 rails 不是从 Name 着手? name ='[a][b]c' 的就变成了 a.b.c
象级联的话 rails 不是从 Name 着手? name ='[a][b]c' 的就变成了 a.b.c
24 楼
johncon
2008-10-14
shameant 写道
dojo.formToObject 可以把FORM分装成JSON对象
---谢谢提醒
看了下它的代码,并不支持级联,如a.b.id;和集合形式,如:a[0].b.id或
a[0].b[0].id的数据结构
23 楼
johncon
2008-10-14
slaser 写道
楼主有没有想过把json对象数据copy到任意html元素?比如把{"id":"A1","innerHTML":"aaa"}的innerHTML复制到<div id="A1"></div>里面去?
有。。。 这个是要做扩展
即:
achun 写道
哈哈,终于看到有人和我有相同的想法了,(以前没有发现).
不过,其实这个想法可以延伸的,而且我已经延伸了.那就是:
既然是要得到JSON的数据,那一定和form有关么?非要从form中获取么?
当然不是.因此我写了一个基于jQuery的扩展
使得不拘泥于form
22 楼
slaser
2008-10-14
楼主有没有想过把json对象数据copy到任意html元素?
比如把{"id":"A1","innerHTML":"aaa"}的innerHTML复制到
<div id="A1"></div>
里面去?
比如把{"id":"A1","innerHTML":"aaa"}的innerHTML复制到
<div id="A1"></div>
里面去?
21 楼
johncon
2008-10-13
whiletrue 写道
我想问下日期类型你是怎么判断的呢?也就是如何在json里面做标志,然后转成java对象的,学习下
fins 写道
你用什么工具做的转换啊? json和java转换的东西我做过很多 你这个问题 建议在转换前就处理好 是int 型 还是string 型你必须要明确的告诉 转换器 目前我的做法是 json --->java 时 , 按字符串从sjon中取值 在向 java对象中赋值时 判断对象的类型 然后做响应的转换. btw: select-multiple的数据在客户端时 都是字符串型 最后到后台是什么类型取决于你的需求.
这个我尝试了下
json-->java
在用json-lib把jsonString转换成jsonObject之前
JSONObject.fromObject(jsonString)
增加注册:
JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd", "yyyy-MM-dd HH:mm:ss"}));
java-->json
在用json-lib把java转换成jsonObject之前
JSONArray.fromObject(object, jsonConfig)或
JSONObject.fromObject(object, jsonConfig
增加配置:
jsonConfig.registerJsonValueProcessor(java.util.Date.class, new JsonDateValueProcessor());
其中JsonDateValueProcessor是自己扩展处理的
public class JsonDateValueProcessor implements JsonValueProcessor { private String format = "yyyy-MM-dd HH:mm:ss"; public JsonDateValueProcessor() { } public JsonDateValueProcessor(String format) { this.format = format; } public Object processArrayValue(Object value, JsonConfig jsonConfig) { String[] obj = {}; if (value instanceof Date[]) { SimpleDateFormat sf = new SimpleDateFormat(format); Date[] dates = (Date[]) value; obj = new String[dates.length]; for (int i = 0; i < dates.length; i++) { obj[i] = sf.format(dates[i]); } } return obj; } public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) { if (value instanceof Date) { String str = new SimpleDateFormat(format).format((Date) value); return str; } return value == null ? null : value.toString(); } public String getFormat() { return format; } public void setFormat(String format) { this.format = format; } }
20 楼
rainchen
2008-10-13
jquery用serializeArray 不是直接生成JSON对象,是生成组合对象数组,类似[{name: 'a', value: 'b'},{name: 'c', value: 'd'}]
完整
完整
19 楼
rainchen
2008-10-13
prototype可以实现啊
$("test_form").serialize().toQueryParams()
相关推荐
### JavaScript表单域与JSON数据间的交互 #### 知识点概述 在现代Web开发中,数据处理是一项核心任务,特别是在客户端与服务器之间的数据交换过程中。JavaScript作为一种强大的客户端脚本语言,提供了丰富的API来...
#### jQuery插件实现表单域与JSON数据交互 在提供的文档示例中,作者通过自定义jQuery插件实现了表单域与JSON数据之间的交互。下面将详细解析这一插件的具体实现及其工作原理。 #### jQuery插件详解 ##### 插件...
### JavaScript表单域与JSON数据间的交互 在Web开发中,JavaScript经常被用来处理表单数据,特别是将这些数据转化为JSON格式以便进行前后端的数据交换。本文将详细探讨如何使用JavaScript来实现表单域与JSON数据...
### JavaScript表单域与JSON数据间的交互 #### 引言 在现代Web开发中,JavaScript作为前端编程的主要语言之一,其与HTML表单之间的交互变得日益重要。通过将表单中的数据转换为JSON格式,我们可以更方便地进行数据...
JavaScript表单域与JSON数据间的交互,实质上是如何在JavaScript中将表单数据编码成JSON格式的数据,以及如何将JSON格式的数据解码到表单域中。 在描述中提到,作者没有找到能够满足特定需求的JavaScript框架,即...
在这个例子中,我们将深入探讨如何使用jQuery的`getJSON()`函数与Servlet进行交互。 首先,我们来看`getJSON()`的基本用法。`getJSON()`接收三个参数:URL,数据(可选),以及一个回调函数。当服务器返回JSON数据...
这个示例展示了如何在前端处理JSON数据,以及如何利用Ajax异步交互实现数据的动态展示和操作。值得注意的是,尽管`eval()`在这里用于解析JSON,但它通常被认为是不安全的,因为它可以执行任意的JavaScript代码。更好...
- 需要注意跨域问题,确保前后端之间的数据交互顺利进行。 #### 五、总结 通过以上介绍可以看出,利用Ajax+JSON技术可以高效地实现多级联动菜单功能,极大地提升了用户体验。此外,结合Struts框架的使用进一步简化...
- 适用于解决跨域问题的简单方法,通过在JavaScript中定义一个回调函数,PHP返回JSON数据包裹在该函数调用中。 - PHP:`echo $_GET['callback'] . '(' . json_encode($data) . ')';` - JavaScript:`script.src =...
在开发Web应用时,前端与后端的数据交互是不可或缺的一部分。Vue.js是一个流行的JavaScript框架,用于构建用户界面,而axios是Vue.js中常用的库,用于处理HTTP请求,包括POST请求。另一方面,C# .NET是一种强大的...
5. **表单域的使用**:"表单添加域.txt"可能涉及在Lotus Domino表单中添加域(fields)以支持数据的输入和验证。这些域的数据可以被JqGrid用于显示或编辑。 总的来说,"lotus domino jqgrid显示视图例子"是一个将...
JSONP可以请求来自其他域的JSON数据,请求的URL中通常会包含一个callback参数,用于指定服务器返回数据的回调函数名称。通过定义回调函数,可以实现跨域数据的调用和使用。 最后,项目中还提及了序列值的获取和JSON...
这些类共同协作,使得开发者能够轻松地在前端应用中处理复杂的数据交互。 **Ext.data**的主要功能特点包括: 1. **异步加载**:支持异步加载数据,减少用户等待时间。 2. **类型转换**:内置对多种数据类型的转换...
在给定的标题“COMbiancheng.rar”和描述中提到的“COM编程获取表单域信息”,我们可以理解这是一个关于如何利用COM组件来获取Web表单域数据的教程或代码示例。 在Web开发中,表单域是用户在HTML表单中输入数据的...
综上所述,无论是在LotusScript还是JavaScript中,获取表单域的值都需要根据所使用的脚本语言和域的类型来采取不同的策略。LotusScript提供了更为一致的接口,而JavaScript则需要针对每种类型的域采取特定的处理方式...
你可能需要将JSON数据解析为JavaScript对象,或将JavaScript对象转换为JSON字符串。 在解ACCP6.0第三章的课后习题时,你需要综合运用以上知识点,通过实践加深理解。文件"MyWab"可能是完成这些习题的工具或参考资料...
然而,为了实现不同域之间的数据交互,WCF提供了跨域功能。在本实例中,SilverLight应用需要能够跨域调用控制台程序托管的WCF服务,这就需要配置WCF服务允许跨域请求。 4. **控制台程序托管WCF** 通常,WCF服务会...
首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单代码”的资源中,我们可以期待看到一个清晰的示例,展示如何将表单数据发送到服务器,并处理...
以上就是关于“记录-笔记-html-异步读取省份和二级城市”这个主题的主要知识点,包括jQuery的异步请求、JSON数据交换、前端与后端交互以及表单验证等。在实际开发中,理解和熟练掌握这些技术是提升网页应用性能和...