前台页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据班级获取学员下拉框数据</title>
<script type="text/javascript" >
//1.页面加载完毕后创建异步对象 请求班级数据
window.onload = function () {
//1.1创建异步对象
var xhr = new XMLHttpRequest();
//1.2设置参数
xhr.open("get", "GetData.ashx?type=1", true);
//1.3设置不使用浏览器缓存
xhr.setRequestHeader("If-Modified-Since", "0");
//1.4设置回调函数
xhr.onreadystatechange = function () {
//当完全接收完响应报文后，并且 响应状态码为200的时候
if (xhr.readyState == 4 && xhr.status == 200) {
//[{'id':'1','name':'1班'}，{'id':'2','name':'2班'}，{'id':'3','name':'3班'}]
var res = xhr.responseText;//获取响应报文体内容
//===============将数据转成js数组============
//var resJson = eval(res);//第一种转换方法
//标准json格式[{"id":"1","name":"1班"}，{"id":"2","name":"2班"}]
//将 接收到的 json字符串 转换成 json对象
//注意：json其实是一种 数据传输的 格式（json格式满足js字面量表示法语法） 浏览器和服务器端 实际 不存在 所谓的 json 对象 其实就是js对象
var jsonArr = JSON.parse(res);//第二种转换方法 注意：用这种格式转换的时候属性名必须用双引号
loadSel("selClass", jsonArr, "id", "name");
//========================================
//alert(resJson2.length);
//document.getElementById("selClass").innerHTML = res;
}
}
//1.5发送异步请求
xhr.send(null);
};
/*
生成下拉框选项
*/
function loadSel(selId, dataArr, valueField, textField) {
//根据id获取下拉框
var selObj = document.getElementById(selId);
//清空下拉框选项
selObj.options.length = 0;
//遍历数据数组
for (var i = 0; i < dataArr.length; i++) {
//取出数据元素
var item = dataArr[i]; //item.id item.name方式来访问 或者item["id"] item["name"] 来访问
//创建 下拉框选项 对象
var opt = new Option(item[textField], item[valueField]);
//添加到下拉框中
selObj.options.add(opt);
}
}
</script>
</head>
<body>
<center id="centerCon">
班级：<select id="selClass"><option>哇哈哈哈</option></select>
学生：<select id="selStu"></select>
</center>
</body>
本栏目更多精彩内容：http://www.bianceng.cn/webkf/aspx/