文档章节

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

 木宛城主
发布于 2015/03/02 19:39
字数 495
阅读 5
收藏 0
点赞 0
评论 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
黄浦
你的第一杯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

你的第一杯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

JavaWeb15-HTML篇笔记(三)

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

我是小谷粒 ⋅ 06/01 ⋅ 0

Web开发系列 - JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子...

长征2号 ⋅ 2017/01/05 ⋅ 0

EXTJS 中Ajax 应用示例

简单的Ext.Ajax. request示例 var requestConfig = { url :'loginServer.jsp',//请求的服务器地址 params : {userName : 'tom',password : '123'},//请求参数 customer : '自定义属性',//附加......

阿灿 ⋅ 2013/02/28 ⋅ 0

《Pro ASP.NET MVC 3 Framework》学习笔记之三十二 【无入侵的Ajax】

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

mszhangxuefei ⋅ 2012/06/01 ⋅ 0

爱上MVC系列~目录

MVC3配合Razor视图引擎使得我们在开发项目中更加快捷,以下是我在项目开发过程中整理的一些笔记,和大家一起分享一下 爱上MVC系列~目录 爱上MVC~Razor引擎时,在遍历中巧用Output.Write方...

mcy247 ⋅ 2017/12/05 ⋅ 0

编写更加通用的 JavaScript

当你准备好抽象出一个 Web 组件的时候, JavaScript 能帮你做到,融入组件的 JavaScript 变得优雅利索;此时它像一把瑞士军刀,轻松帮你应对各种场景。但当你急于交付时,JavaScript 也能帮你...

红薯 ⋅ 2011/02/10 ⋅ 8

基于jquery实现的类似百度搜索的输入框自动完成功能

自动完成功能是指:类似百度搜索之类的输入一个词的一部分后就自动提示,然后用户可以选择,不需要再输入剩余部分。废话不多说,直观的看一下:   实现这个功能需要服务端配合。客户端通过...

凯文加内特 ⋅ 2014/06/25 ⋅ 3

KodExplorer 3.37 重大更新,数百项细节优化

KodExplorer是款开源的Web在线文件管理、代码编辑器。它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、在线解压缩、音乐播放功能。让你直接在浏览器端实现w...

雾渺 ⋅ 2017/01/06 ⋅ 20

没有更多内容

加载失败,请刷新页面

加载更多

下一页

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 35分钟前 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部