专栏首页木宛城主曾经的代码系列——AJAX和JSON生成下拉列表框

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

代码测试使用

前台页面

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 原生态Ajax无刷新评论和顶踩代码(记事本打造,无验证)

    <script type="text/javascript"> var xhr=false; var actionType; //todo: var s...

    用户1161731
  • 曾今的代码系列——自己的分页控件+存储过程实现分页

    项目里面的测试代码,仅供参考 LoginByAjax <title>Ajax登陆</title> <script src="Scripts/c...

    用户1161731
  • Unity应用架构设计(10)——绕不开的协程和多线程(Part 2)

    在上一回合谈到,客户端应用程序的所有操作都在主线程上进行,所以一些比较耗时的操作可以在异步线程上去进行,充分利用CPU的性能来达到程序的最佳性能。对于Unit...

    用户1161731
  • 适合初学者练手的vue小项目(附github源码)

    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前...

    祈澈菇凉
  • SwiftUI:启用高性能 Metal 渲染

    SwiftUI默认使用Core Animation进行渲染,提供了出色的开箱即用性能。但是,对于复杂的渲染,您可能会发现代码开始变慢——任何低于每秒60帧(FP...

    韦弦zhy
  • Kafka实战宝典:一文带解决Kafka常见故障处理

    Kafka的bin目录下shell脚本是kafka自带的管理工具,提供topic的创建/删除/配置修改、消费者的监控、分区重载、集群健康监控、收发端TPS压测、...

    WindyQin
  • Kafka——分布式的消息队列

    Producers – 生产者 生产者将数据发布到他们选择的主题。生产者负责选择要分配给主题中哪个分区的消息 可以以循环方式完成此操作,仅是为了平衡负载,也可...

    时间静止不是简史
  • vue 使用 cli 工具构建项目

    章鱼喵
  • 移动商城第二篇(品牌管理模块)【文件上传、数据校验、CRUD】

    添加品牌 在原型界面上,我们都是一些“死”数据,我们需要将数据库的记录代替这些“死”数据! ? 这里写图片描述 上传图片 服务端console对图片进行上传到我...

    Java3y
  • Web For Pentester - SQLi Part Tips

    风流

扫码关注云+社区

领取腾讯云代金券