找了几个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 不知道有什么好的建议没
分享到：
谢谢
对，要改正
相关推荐
### 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数据交换、前端与后端交互以及表单验证等。在实际开发中，理解和熟练掌握这些技术是提升网页应用性能和...