文档章节

曾经的代码系列——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
JavaWeb15-HTML篇笔记(三)

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

我是小谷粒
06/01
0
0
《Pro ASP.NET MVC 3 Framework》学习笔记之三十二 【无入侵的Ajax】

Ajax是Asynchronous JavaScript and XML的缩写,正如我们看到的,XML部分已经不再像过去那样重要,但是异步的部分却让Ajax非常有用。它是一种在后台从服务端请求数据的模型,而不用重新加载网...

mszhangxuefei
2012/06/01
0
0
创建几个常用table展示方式插件

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

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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 这就是不要女朋友的理由

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @狄安娜的猫 :分享丁家鑫的单曲《丁家鑫 - 克罗地亚狂想曲 - 古筝remix》 《丁家鑫 - 克罗地亚狂想曲 - 古筝remix》 手机党少年们想听歌,请...

小小编辑
20分钟前
79
6
CentOS配置Tomcat监听80端口,虚拟主机

Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [root@test-a ~]# vim /usr/local/tomcat/conf/server.xml # 找到 Connector port="8080" protocol="HTTP/1......

野雪球
今天
5
0
《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
今天
4
0
java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
今天
5
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部