文档章节

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

 木宛城主
发布于 2015/03/02 19:43
字数 495
阅读 6
收藏 0

代码测试使用

前台页面

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

© 著作权归作者所有

共有 人打赏支持
粉丝 2
博文 222
码字总数 199010
作品 0
黄浦
Java快速开发平台,JEECG 3.7.7闪电版本发布,增加多套主流UI代码生成器模板

JEECG 3.7.7 闪电版本发布,提供5套主流UI代码生成器模板 导读 ⊙平台性能优化,速度闪电般提升 ⊙提供5套新的主流UI代码生成器模板(Bootstrap表单+BootstrapTable列表 ElementUI列表表单)...

Jeecg
07/16
0
0
你的第一杯Web 2.0 —— 快速浏览jQuery、Spring MVC和XStream/J...

不再有页面刷新:使用jQuery 相关厂商内容 免费迷你书下载:Flex入门指南——PHP开发者 Flash Builder 4 Beta和FlexUnit下的测试驱动开发 下载Flex 4 SDK,构建超级棒的Flex应用 使用Pixel B...

李长春
2011/09/15
0
0
你的第一杯Web 2.0 —— 快速浏览jQuery、Spring MVC和XStream/Jettison

作者 Joel Confino译者 张凯峰 发布于 2008年12月12日 上午12时1分 社区 Java 主题 Web 2.0, JavaScript 标签 jQuery, XStream 不再有页面刷新:使用jQuery 在我参与创建的一些Web网站应用中...

晨曦之光
2012/03/09
0
0
JavaWeb15-HTML篇笔记(三)

1.1 案例三:使用JQuery完成仿百度的信息提示:1.1.1 需求: 在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的). 1.1.2 分析:1.1.2.1 步骤分析: ...

我是小谷粒
06/01
0
0
创建几个常用table展示方式插件

这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件由来的目的是项目中需要一个tab...

神牛步行3
2016/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Shiro | 实现权限验证完整版

写在前面的话 提及权限,就会想到安全,是一个十分棘手的话题。这里只是作为学校Shiro的一个记录,而不是,权限就应该这样设计之类的。 Shiro框架 1、Shiro是基于Apache开源的强大灵活的开源...

冯文议
今天
1
0
linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
2
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
3
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
15
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部