`
ahang8415
  • 浏览: 46386 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

使用JSON来做数据传输的动态下拉列表 分享

阅读更多
之前也写过一个使用XML文件来传送数据的动态下拉列表,前段时间也在使用JSON来作为AJAX的数据传输介质。相关JSON的文章请参看http://j2ee.blog.sohu.com/65388567.html。今天就来说下使用JSON来做动态下拉列表的实现。

    动态下拉列表的原理其实很简单的,当某一下拉列表触发了onchange事件,然后使用AJAX在后台向服务器异步请求数据,最后将服务器返回的数据进行解析后动态添加到指定的select上即可!

    首先来看后台的数据输出,我们假设服务器传送给客户段的JSON数据格式为如下:

{
    "options" : [
        {"value" : 值,"text" : 文本},
        {"value" : 值,"text" : 文本},
        {"value" : 值,"text" : 文本}
        ]
}

    其中options是整个JSON对象的标识符,它是一个数组,该数组中的每一个值表示一个select中的option,当然该值也是一个对象了,有两个属性,一个是value,一个是text,分别对应option中的value和显示的text值。

    有了数据格式,那么客户端和服务器端进行交流就方便很多了。我们来先写客户端的JS方法。这里我是提供一个静态的实用类Select,专门针对select元素的操作方法,如下:

/**-----------------------------------------------------------------------
* ------------------------针对select操作的实用Select类-------------------
* -----------------------------------------------------------------------
*/
function Select(){};
/**
* 根据指定的JSON对象来生成指定的select的options项(清除原来的options).
*/
Select.create = function(/*string*/selectId,/*json object*/json) {
Select.clear(selectId);
Select.add(selectId, json);
};
/**
* 该方法同create,只不过是在原来的基础上进行追加
*/
Select.add = function(/*string*/selectId,/*json object*/json) {
try {
  if (!json.options) return;
  for (var i = 0; i < json.options.length; i ++) {
   Select.addOption(selectId,json.options[i].value,json.options[i].text);
  }
} catch (ex) {
  base.alert('设置select错误:指定的JSON对象不符合Select对象的解析要求!');
}
};
/**
* 创建一个options并返回
*/
Select.createOption = function(/*string*/value, /*string*/text) {
var opt = document.createElement('option');
opt.setAttribute('value', value);
opt.innerHTML = text;
return opt;
};
/**
* 给指定的select添加一个option,并返回当前option对象
*/
Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {
var opt = Select.createOption(value, text);
$(selectId).appendChild(opt);
return opt;
};
/**
* 获取指定select的当前被选中的options对象,如果为多选且有多个被选中则返回数组.
*/
Select.getSelected = function(/*string*/selectId) {
var slt = $(selectId);
if (!slt) return null;
if (slt.type.toLowerCase() == "select-multiple") {
  var len = Select.len(selectId);
  var result = [];
  for (var i = 0; i < len; i ++) {
   if (slt.options[i].selected) result.push(slt.options[i]);
  }
  return result.length > 1 ? result : (result.length == 0 ? null : result[0]);
} else {
  var index = $(selectId).selectedIndex;
  return $(selectId).options[index];
}
};
/**
* 使指定索引位置的option被选中.从0开始.
*/
Select.select = function(/*string*/selectId, /*int*/index) {
var slt = $(selectId);
if (!slt) return false;
for (var i = 0; i < slt.options.length; i ++) {
  if (index == i) {
   slt.options[i].setAttribute("selected", "selected");
   return true;
  }
}
return false;
};
/**
* 选中指定的select的所有option选项,如果支持多选的话
*/
Select.selectAll = function(/*string*/selectId) {
var len = Select.len(selectId);
for (var i = 0; i < len; i ++) Select.select(selectId, i);
};
/**
* 获取指定select的总的options个数
*/
Select.len = function(/*string*/selectId) {
return $(selectId).options.length;
};
/**
* 清除select中满足条件的options,如果没有指定处理方法则清除所有options项
*/
Select.clear = function(/*string*/selectId, /*function*/iterator) {
if (typeof(iterator) != 'function') {
  $(selectId).length = 0;
} else {
  var slt = $(selectId);
  for (var i = slt.options.length - 1; i >= 0; i --) {
   if (iterator(slt.options[i]) == true) slt.removeChild(slt.options[i]);
  }
}
};
/**
* 复制指定的select的option对象到另外一指定的select对象上.如果指定了处理
* 函数,那么只有返回true时才会copy.
* 函数iterator参数:当前处理的option对象、目标select的options数组
*/
Select.copy = function(/*string*/srcSlt, /*string*/targetSlt, /*function*/iterator) {
var s = $(srcSlt), t = $(targetSlt);
for (var i = 0; i < s.options.length; i ++) {
  if (typeof(iterator) == 'function') {
   if (iterator(s.options[i], $(targetSlt).options) == true) {
    t.appendChild(s.options[i].cloneNode(true));
   }
  } else {
   t.appendChild(s.options[i].cloneNode(true));
  }
}
};

    那么在回调方法中就可以只要来调用:

……
var jsonString = xmlHttp.responeText; // 获取服务器返回的json字符串
var jsonObj = null;
try {
   jsonObj = eval('(' + jsonString + ')'); // 将json字符串转换成对象
} catch (ex) {
   return null;
}
Select.create("你的select的ID", jsonObj); // 执行option的添加
……

    在Select中提供了很多实用的JS方法来方便操作select对象,我们这里只使用其中的create方法。客户端有了JS,我们现在来做服务器端的字符串输出。这里我们用到了JSONLib库,该库可以很方便的来从现有的javaBean或其他集合对象中来转换成json字符串。我们这里也提供一个公用类如下:

package common.utils.json;

import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.commons.beanutils.BeanUtils;
import org.apache.log4j.Logger;

/**
* 下拉列表的JSON对象转换.
* 转换后的字符串是如下格式:
* {"options" : [ {"value" : 值,"text" : 文本},
*       {"value" : 值,"text" : 文本},
*       ……
*       {"value" : 值,"text" : 文本}
*              ]
* }
* 前台将利用两个JS进行转换和生成:
* BaseClass对象的json方法将返回的字符串转换成对象;
* Select对象的create/add方法将把转换后的对象添加到指定的select上去。
*
* @author 铁木箱子
*
*/
public class SelectJSON
{
/**
  * Logger for this class
  */
private static final Logger log = Logger.getLogger(SelectJSON.class);

/**
  * 从指定的map对象中获取要设置的值后组装成返回给前台的JSON对象字符串.
  *
  * 存储在map中的key-value应该是option中的value和text,即如下的option:
  * <option value="hello">你好</option>
  * 应该使用如下的map对象:
  * map.put("hello", "你好");
  * 注意使用map对象相同key值的将会被后设置的给覆盖!
  *
  * @param map
  * @return
  */
public static String fromMap(Map map)
{
  Iterator it = map.keySet().iterator();
  JSONArray options = new JSONArray();
  while (it.hasNext()) {
   JSONObject option = new JSONObject();
   String key = (String)it.next();
   option.put("value", key);
   option.put("text", map.get(key));
   options.put(option);
  }
  JSONObject result = new JSONObject();
  result.put("options", options.toString());
  return result.toString();
}

/**
  * 从指定的list中获取要设置出去JSON对象.
  *
  * 存放在list中的对象应该是满足JavaBean规范的POJO对象,同时还要指定该对象中的
  * 哪个属性作为option的value,哪个属性作为option的text。比如有如下一个JavaBean
  * ,其部分属性如下:
  * ……
  * public String getOptValue()
  * {
  *     return this.optValue;
  * }
  * public String getOptText()
  * {
  *     return this.optText;
  * }
  * ……
  * 如果我们想用optValue作为option的value属性,而optText作为option的text值,那么
  * 我们就应该传递参数分别是:optValue, optText.
  *
  * @param list
  * @param valueProp
  * @param textProp
  * @return
  */
public static String fromList(List list, String valueProp, String textProp)
{
  JSONArray options = new JSONArray();
  try {
   for (Object obj : list) {
    JSONObject option = new JSONObject();
    String value = BeanUtils.getProperty(obj, valueProp);
    String text = BeanUtils.getProperty(obj, textProp);
    option.put("value", value);
    option.put("text", text);
    options.put(option);
   }
  } catch (Exception ex) {
   throw new RuntimeException(ex);
  }
  JSONObject result = new JSONObject();
  result.put("options", options.toString());
  return result.toString();
}

public static void main(String[] args)
{
  // map 测试
  Map<String,String> tt = new HashMap<String,String>();
  tt.put("value1", "text1");
  tt.put("value2", "text2");
  tt.put("value3", "text3");
  log.info(SelectJSON.fromMap(tt));
}
}

    在类SelectJSON中提供了两个方法,一个是从map中来获取并转换成json字符串,还一个就是从list中的对象来获取,这个方法需要使用 BeanUtils工具来辅助获取JavaBean对象中的指定属性。当然了,你可以可以写其他方便发辅助方法来达到这样的效果。

    比如我们在上面的SelectJSON类中的测试,会输出:

{"options":[{"value":"value1","text":"text1"},{"value":"value2","text":"text2"},{"value":"value3","text":"text3"}]}

    然后我们再调用上面提到的JS类Select进行操作就可以了,注意,在使用Select类进行操作前,比如先转换服务器返回的字符串为js对象,即使用 eval来执行返回字符串即可!好了,关于使用json来做动态下拉列表就说到这里咯,如有问题,欢迎一起交流~~~
分享到:
评论

相关推荐

    servlet+ajax做的两个下拉列表联动

    5. **响应处理**:Ajax请求成功后,JavaScript解析服务器返回的JSON数据,并使用DOM操作(如innerHTML或append)更新第二个下拉列表。 6. **错误处理**:处理可能出现的网络错误或服务器错误,向用户显示友好的提示...

    银行及对应的简码json数据

    了解了以上概念后,我们可以利用这些JSON数据进行各种操作,如构建银行选择下拉列表、实现自动填写功能,甚至结合其他数据源进行更复杂的分析,如银行分布分析、交易趋势研究等。总之,理解和掌握银行简码及JSON数据...

    J2EE下拉列表动态加载

    在这个例子中,我们将使用Action类来响应用户的请求,获取需要填充下拉列表的数据,并将结果以List形式返回到页面。 2. **Hibernate框架**:Hibernate是一个对象关系映射(ORM)框架,用于简化数据库操作。在动态...

    ajax+struts2.0+jsp下拉列表级联

    5. AJAX响应:AJAX接收到服务器返回的JSON数据后,在客户端解析并更新第二个下拉列表的选项。这可以通过修改DOM元素实现。 6. 用户界面更新:用户看到第二个下拉列表根据第一个的选择自动填充了新的选项。 在"Ajax...

    无限级、无刷新、联动下拉列表框

    4. 了解如何使用JSON或XML格式传输数据,因为它们是Ajax通信中常用的数据格式。 5. 能够编写服务器端代码(如C#或VB.NET)来处理异步请求并返回新的数据。 在实际项目中,开发这样的组件需要考虑性能优化,例如使用...

    全国省市区三级联动json数据.zip

    开发者可能需要解析JSON数据,将其绑定到DOM元素上,并监听用户的选择事件来更新下拉列表。 具体实现步骤可能包括: 1. **加载数据**:使用Ajax请求获取JSON数据,或者直接在HTML页面中内联JSON数据。 2. **解析...

    省市区联动下拉列表

    总的来说,省市区联动下拉列表是前端开发中常见的一种功能,它涉及到了JavaScript事件处理、异步通信、DOM操作和数据结构等多个核心知识点。通过熟练掌握这些技能,开发者可以创建出高效、用户友好的应用程序。

    用ajax实现的jsp二级联动下拉列表

    将二级数据以JSON格式响应给客户端后,JavaScript接收到响应,解析JSON数据,并动态地创建二级下拉列表的选项。这通常通过操作DOM(Document Object Model)来完成,例如使用`document.createElement`创建新的`...

    省市区、省市、省选择json数据

    此外,为了减少数据传输量,可以使用懒加载策略,只在需要时加载特定级别的数据。 标签“省市区选择器 省市选择器 省选择器”表明了这个数据可以用于创建不同粒度的地址选择组件。省市区选择器允许用户精确到区县...

    数据库读取下拉列表选项

    以上就是从数据库读取下拉列表数据并显示在网页中的整个过程,涵盖了数据库操作、后端开发、数据传输和前端渲染等多个环节。通过这个过程,我们可以为用户提供一个互动性强、数据实时更新的下拉列表选择项。

    全国省市县三级行政区域,JSON格式

    3. 创建四个下拉列表或选择器,并根据当前选择项动态更新下一级别的选项。 4. 当用户在最后一级选择完成后,收集所有级别的选择,形成完整的地址信息。 对于开发者来说,理解并正确处理JSON数据是必备技能之一,...

    json地图数据,精确到县

    在JavaScript中,处理JSON数据非常方便,因为JSON本身就是JavaScript的一个子集。通过`JSON.parse()`方法,可以将JSON字符串转换为JavaScript对象,而`JSON.stringify()`则可以将JavaScript对象转换回JSON字符串。...

    form表单加载复杂json数据

    4. **处理嵌套数据**:如果JSON数据包含嵌套对象,可以使用`fieldset`组件来组织表单结构。对于数组,你可以使用`checkboxgroup`、`radiogroup`或其他重复字段来表示。例如: ```javascript items: [{ xtype: '...

    ajax 五级联动 下拉列表

    如果使用的是jQuery,可以使用`$.parseJSON()`解析JSON数据,并用`append()`方法添加到`&lt;option&gt;`元素中。 6. **数据库连接**:由于文件“database.rar”需要单独下载,这可能意味着数据库文件不是直接嵌入在项目中...

    jQuery + Ajax + json 级联

    6. **更新UI**:使用jQuery操作DOM,根据解析出的JSON数据更新第二个下拉列表的选项。 在这个过程中,jQuery简化了DOM操作和Ajax调用,而JSON提供了高效的数据交换方式。这种级联效果广泛应用于表单验证、动态过滤...

    帝国CMS二级联动插件(ajax下拉列表) 帝国CMS二级联动插件(ajax下拉列表).rar

    前端接收到响应后,解析JSON数据并填充到第二个下拉列表中。 在帝国CMS中,实现这个功能可能需要以下步骤: 1. 安装插件:首先,你需要将下载的RAR文件解压,并将其中的文件上传至帝国CMS系统的相应目录,通常是“e...

    ajax使用jquery json实现的省市县三级联动经验总结

    前端通过jQuery发起Ajax请求,获取后端返回的JSON数据,并动态填充下拉列表。在页面初始化时,首先获取所有省份信息。当用户选择省份后,再次发送Ajax请求,获取该省份下的所有城市信息,并填充到城市下拉列表中。...

    Ajax+PHP二级联动下拉列表.rar

    5. **更新界面**:JavaScript接收到服务器的响应后,解析数据,然后动态更新二级下拉列表的选项。这样,用户就可以看到根据一级选择实时变化的二级选项。 6. **交互优化**:为了提升用户体验,可以添加一些加载动画...

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    总结来说,这个压缩包提供的示例是一个基于SSH后端、jQuery前端和JSON数据交换的Ajax级联操作实现,旨在展示如何优雅地处理Web应用中的动态数据加载。这种技术组合大大提高了用户体验,因为用户无需刷新整个页面就能...

    ajax+json仿照google提示

    客户端JavaScript代码接收到这个响应后,会解析JSON数据,并动态地在搜索框下方展示一个下拉列表,显示关键词建议。这通常涉及到DOM操作,比如创建新的`&lt;li&gt;`元素,将每个建议填充到列表中。 为了提高性能和用户...

Global site tag (gtag.js) - Google Analytics