曾经的代码系列——AJAX和JSON生成下拉列表框
代码测试使用
前台页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetGradeClassInfo.aspx.cs" Inherits="Eyes.Web.GetGradeClassInfo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax and Json</title>
<script src="Scripts/common.js" type="text/javascript"></script>
<script type="text/javascript">
var xhr;
window.onload = function () {
xhr = new XMLHttpRequest();
GetDataByAjax();
showMsg();
}
function showMsg() {
document.getElementById("msgDiv").style.display = "block";
document.getElementById("msgImg").src = "Images/load.gif";
}
function GetDataByAjax() {
xhr.open("GET", "GetGradeClassInfo.aspx?isAjax=1", true);
xhr.setRequestHeader("If-Modified-Since", "0"); //不使用缓存
xhr.onreadystatechange = watching;
xhr.send(null);
}
//存储服务器返回的年级/班级信息
var jsonResult;
function watching() {
if (xhr.readyState==4) {
if (xhr.status==200) {
var resStr = xhr.responseText;
jsonResult = eval("(" + resStr + ")");
AddGradesToSelectControl(jsonResult.grades);
AddClassesToSelectControl(jsonResult.grades[0].id);
document.getElementById("msgDiv").style.display = "none";
}
else {
alert("服务器错误"+xhr.status);
}
}
}
//将包含年级信息的数组--->生成年级下拉列表选项
function AddGradesToSelectControl(gradeArr) {
var selGrades = document.getElementById("grades");
for (var i = 0; i < gradeArr.length; i++) {
var option = new Option(gradeArr[i].name, gradeArr[i].id);
selGrades.options.add(option);
}
}
//将包含班级信息的数组--->生成班级下拉列表选项
function AddClassesToSelectControl(gradeId) {
var selClasses = document.getElementById("classes");
ClearSel(selClasses);
for (var i = 0; i < jsonResult.classes.length; i++) {
if (gradeId == jsonResult.classes[i].cgId) {
var option = new Option(jsonResult.classes[i].name, jsonResult.classes[i].id);
selClasses.options.add(option);
}
}
}
//清空下拉列表框
function ClearSel(selObj) {
for (var i = selObj.options.length - 1; i > -1; i--) {
selObj.options[i] = null;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="display:none" id="msgDiv">
<img id="msgImg" />
</div>
<div >
<select id="grades" onchange="AddClassesToSelectControl(this.value)"></select>
<select id="classes">
</select>
</div>
</form>
</body>
</html>后台页面——手动拼接Json字符串
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
namespace Eyes.Web
{
public partial class GetGradeClassInfo : System.Web.UI.Page
{
BLL.GradeManager gradeManager = new BLL.GradeManager();
BLL.ClassManager classManager = new BLL.ClassManager();
//存放年纪信息
List<Model.Grades> listGrades = null;
List<Model.Classes> listClasses = null;
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrWhiteSpace(Request.QueryString["isAjax"]))
{
System.Threading.Thread.Sleep(5000);
LoadData();
string gradeArrStr = GetGradeDataString();
string classArrStr = GetClassDataString();
Response.Write("{grades:"+gradeArrStr+",classes:"+classArrStr+"}");
Response.End();
}
}
/// <summary>
/// 获得年级数据字符串
/// </summary>
/// <returns>[{id:1,name:"eyes"},{}]</returns>
public string GetGradeDataString()
{
StringBuilder sbStr = new StringBuilder("[");
foreach (Model.Grades model in listGrades)
{
sbStr.Append("{id:");
sbStr.Append(model.GID);
sbStr.Append(",name:\"");
sbStr.Append(model.GName);
sbStr.Append("\"},");
}
return sbStr.ToString().Substring(0, sbStr.Length - 1) + "]";
}
/// <summary>
/// 获得班级数据字符串
/// </summary>
/// <returns></returns>
public string GetClassDataString()
{
StringBuilder sbStr = new StringBuilder("[");
foreach (Model.Classes model in listClasses)
{
sbStr.Append("{id:");
sbStr.Append(model.CID);
sbStr.Append(",name:\"");
sbStr.Append(model.CName);
sbStr.Append("\",cgId:");
sbStr.Append(model.CGID);
sbStr.Append("},");
}
return sbStr.ToString().Trim(',') + "]";
}
public void LoadData()
{
listGrades = gradeManager.GetAllGrades();
listClasses = classManager.GetAllClasses();
}
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2012-09-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录