曾經的代碼系列——AJAX和JSON產生下拉式清單方塊

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

前台頁面
後台頁面——手動拼接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();        }               }}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More