您的位置：首页 > Web前端 > JavaScript

曾经的代码系列——AJAX和JSON生成下拉列表框

2015-03-02 00:00 393 查看

代码测试使用

前台页面

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航