文档章节

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

 木宛城主
发布于 2015/03/02 19:39
字数 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

没有更多内容

加载失败,请刷新页面

加载更多

gson1.7.1线程并发导致空指针问题

java.lang.NullPointerExceptionat com.google.gson.FieldAttributes.getAnnotationFromArray(FieldAttributes.java:231)at com.google.gson.FieldAttributes.getAnnotation(FieldAttribut......

东风125
38分钟前
1
0
以太坊RPC接口使用

以太坊RPC接口文档: https://github.com/ethereum/wiki/wiki/JSON-RPC#web3_clientversion 使用方式: 比如我要调用某个合约的balanceOf(address _owner)方法。 因为没有改变合约的状态,所以...

王坤charlie
今天
2
0
C#下的一个好用的日历库(sxtwl_cpp),支持农历转公历,和公历转农历等功能

sxtwl_cpp是寿星天文历的C++版本实现。支持多种语言的绑定 代码首页 懒人包 懒人包使用方法 1、右链工程中的引用-》添加引用-》浏览-》选中dotnet目录下的sxtwl.net.dll 2、生成解决方案-》找...

元谷
今天
1
0
C++基础知识

链接:https://zhuanlan.zhihu.com/p/38399566 本文主要提一下以下三个区别: 引用必须初始化,而指针可以不初始化。 我们在定义一个引用的时候必须为其指定一个初始值,但是指针却不需要。 ...

悲催的古灵武士
今天
1
0
Oracle备份脚本,保留10天数据

@echo off echo 删除10天前的备分文件和日志forfiles /p "D:\oracleback\backfile" /m *.dmp /d -10 /c "cmd /c del @path" forfiles /p "D:\oracleback\backfile" /m *.log /d -10......

lyle_luo
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部