阅读目录
代码测试使用
前台页面
<%@ 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(); } } }
本博客为
木宛城主原创，基于
Creative Commons Attribution 2.5 China Mainland License发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名
木宛城主（包含链接）。如您有任何疑问或者授权方面的协商，请给我留言。
本文转自木宛城主博客园博客，原文链接：http://www.cnblogs.com/OceanEyes/archive/2012/09/02/ajax-json-test1.html，如需转载请自行联系原作者
