ajax操作json实现动态下拉列表

先给出一段兼容浏览器的获取AJAX对象的Javascript函数

function getXmlHttp(){

var Xmlhttp=null;

try{

Xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");

}catch(e){
try{Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}catch(E){

Xmlhttp = false;}
}
if((!Xmlhttp) && (typeof(XMLHttpRequest)!= 'undefined') ) {

Xmlhttp = new XMLHttpRequest();

}

return Xmlhttp;
}

使用方法 var xmlhttp = getXmlHttp();

在很多的ajax范例中,开发者都是用xmlhttp从服务器端获得一个xml数据,然后转换成Javascript可触及的对象,再用js绘制到document中.但我觉得这并非唯一选项,我甚至觉得是多此一举!为什么不直接传递js对象呢?在我开发的系统中,xmlhttp从服务器上获得的是代表js对象的字符串.假如我要传送一个人员列表,我会在服务器上输出:
[{id:1,name:"name1"},{id:2,name:"name2"},{id:3,name:"name3"}]

然后在浏览器上用js获得这个字符串所代表的对象:
var returned = xmlhttp.responseText;
var obj = eval(returned );
接着,你就可以这样访问:
var person1 = obj[0]; var person2 = obj[1];
alert(person1.id);
alert(person1.name);

这样做比传递xml文档直接一些,不必通过转换可以让js直接访问数据.

ajax操作json举例: 使用JSON来做数据传输的动态下拉列表

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

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

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

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

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

function Select(){};

Select.create = function( selectId, json ) {
Select.clear(selectId);
Select.add(selectId, json);
};

Select.add = function(selectId,json) {
try {
if (!json.options) return;
for (var i = 0; i Select.addOption(selectId,json.options[i].value,json.options[i].text);
}
} catch (ex) {
base.alert('设置select错误:指定的JSON对象不符合Select对象的解析要求!');
}
};

Select.createOption = function( value, text) {
var opt = document.createElement_x('option');
opt.setAttribute('value', value);
opt.innerHTML = text;
return opt;
};

Select.addOption = function( selectId, value, text) {
var opt = Select.createOption(value, text);
$(selectId).appendChild(opt);
return opt;
};

Select.getSelected = function( 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 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];
}
};

Select.select = function( selectId, index) {
var slt = $(selectId);
if (!slt) return false;
for (var i = 0; i if (index == i) {
slt.options[i].setAttribute("selected", "selected");
return true;
}
}
return false;
};

Select.selectAll = function( selectId) {
var len = Select.len(selectId);
for (var i = 0; i };

Select.len = function( selectId) {
return $(selectId).options.length;
};

Select.clear = function( selectId, 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.copy = function( srcSlt, targetSlt, iterator) {
var s = $(srcSlt), t = $(targetSlt);
for (var i = 0; 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_r('(' + jsonString + ')'); // 将json字符串转换成对象
} catch (ex) {
return null;
}
Select.create("你的select的ID", jsonObj); // 执行option的添加
……

在Select中提供了很多实用的JS方法来方便操作select对象,我们这里只使用其中的create方法.客户端有了JS,我们现在服务器端的字符串输出json数据.

这里我们用到了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;

public class SelectJSON
{

private static final Logger log = Logger.getLogger(SelectJSON.class);

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();
}

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 tt = new HashMap();
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来执行返回字符串即可!