博客
关于我
Web实战之VScode查询SQL server选课信息,输出表格
阅读量:734 次
发布时间:2019-03-21

本文共 2910 字,大约阅读时间需要 9 分钟。

实战记录:使用JavaScript与SQL Server实现大学生网上选课系统的功能扩展

引言

在技术实战系列中,我们将重点介绍如何使用 JavaScript 与 SQL Server 实现大学生网上选课系统的功能扩展。本节将详细讲解如何查询选课信息并实现扩课功能。

第一步:创建HTML表格

首先,我们需要在 HTML 文件中创建一个表格来展示课程信息。添加如下代码:

课程编号 课程名称 上课地点 学分 学期 核定人数 选课人数

第二步:建立与数据库的连接并执行查询

接下来,我们需要通过 JavaScript 连接到 SQL Server 并执行查询。添加以下脚本:

window.onload = function() {    //数据库连接配置    const conn = new ActiveXObject("ADODB.Connection");    const rs = new ActiveXObject("ADODB.Recordset");    const strDSN = "Driver={SQL Server};SERVER=DESKTOP-U4DC9JE;UID=sa;PWD=;DATABASE=school";    //查询语句    const sql = "SELECT id, count(sid) AS c, name, dd, xf, xq, rs FROM Course c1, Choose c2 WHERE c1.tid='0101' AND c1.tid=c2.tid AND c1.id=c2.cid GROUP BY id, name, dd, xf, xq, rs";    try {        conn.Open(strDSN);        rs.open(sql, conn);    } catch (e) {        alert(e.message);    }    //输出结果    let name = '';    let id = '';    let dd = '';    let xf = '';    let xq = '';    let rsh = '';    let count = '';    while (!rs.EOF) {        id = rs.Fields(1).Value;        name = rs.Fields(2).Value;        dd = rs.Fields(3).Value;        xf = rs.Fields(4).Value;        xq = rs.Fields(5).Value;        rsh = rs.Fields(6).Value;        count = rs.Fields('c').Value;        //创建新行        const newRow = document.getElementById('mytableBody').insertRow(1);        newRow.className = 'dataRow';        //添加单元格        newRow.appendChild(newRow.insertCell(0).innerHTML = ``);        newRow.appendChild(newRow.insertCell(1).innerHTML = ``);        newRow.appendChild(newRow.insertCell(2).innerHTML = ``);        newRow.appendChild(newRow.insertCell(3).innerHTML = ``);        newRow.appendChild(newRow.insertCell(4).innerHTML = ``);        newRow.appendChild(newRow.insertCell(5).innerHTML = ``);        newRow.appendChild(newRow.insertCell(6).innerHTML = ``);    }    rs.moveNext();}

第三步:实现扩课功能

为了实现扩课功能,我们需要添加一个按钮并在点击时调用相应的函数。在 HTML 中添加以下内容:

function add() {    const id = document.getElementById('id2').value;    const rise = document.getElementById('rise').value;    const j = parseInt(rise);    if (j > 0) {        const conn = new ActiveXObject("ADODB.Connection");        const strDSN = "Driver={SQL Server};瑟 ErlçraftSERVER=DESKTOP-U4DC9JE;UID=sa;PWD=mtch1997214;DATABASE=school";        try {            conn.Open(strDSN);            const sql = `UPDATE Course SET rs=rs + ${j} WHERE id='${id}'`;            const execute = conn.execute(sql);        } catch (e) {            alert(e.description);        }        alert("扩课操作成功,页面将自动刷新以显示更新");        location.reload();    } else {        alert("扩选人数必须大于0!");    }}

说明

以上代码实现了以下功能:

  • 通过 JavaScript 与 SQL Server 连接并执行查询,动态输出选课信息。
  • 提供了扩课功能,允许教师对特定课程的选课人数进行调整。
  • 在使用该系统时,请确保:

  • 数据库连接信息配置正确。
  • 扩课操作完成后手动刷新页面以确保数据更新。
  • 如果您在使用过程中遇到任何问题,请参考相关技术文档或联系系统管理员进行指导。

    转载地址:http://xsagz.baihongyu.com/

    你可能感兴趣的文章
    OpenCV与AI深度学习 | 2024年AI初学者需要掌握的热门技能有哪些?
    查看>>
    OpenCV与AI深度学习 | CIB-SE-YOLOv8: 优化的YOLOv8, 用于施工现场的安全设备实时检测 !
    查看>>
    OpenCV与AI深度学习 | CoTracker3:用于卓越点跟踪的最新 AI 模型
    查看>>
    OpenCV与AI深度学习 | OpenCV中八种不同的目标追踪算法
    查看>>
    OpenCV与AI深度学习 | OpenCV图像拼接--Stitching detailed使用与参数介绍
    查看>>
    OpenCV与AI深度学习 | OpenCV如何读取仪表中的指针刻度
    查看>>
    OpenCV与AI深度学习 | OpenCV常用图像拼接方法(一) :直接拼接
    查看>>
    OpenCV与AI深度学习 | OpenCV常用图像拼接方法(三):基于特征匹配拼接
    查看>>
    OpenCV与AI深度学习 | OpenCV常用图像拼接方法(二) :基于模板匹配拼接
    查看>>
    OpenCV与AI深度学习 | OpenCV常用图像拼接方法(四):基于Stitcher类拼接
    查看>>
    OpenCV与AI深度学习 | OpenCV快速傅里叶变换(FFT)用于图像和视频流的模糊检测(建议收藏!)
    查看>>
    OpenCV与AI深度学习 | SAM2(Segment Anything Model 2)新一代分割一切大模型介绍与使用(步骤 + 代码)
    查看>>
    OpenCV与AI深度学习 | T-Rex Label !超震撼 AI 自动标注工具,开箱即用、检测一切
    查看>>
    OpenCV与AI深度学习 | YOLO11介绍及五大任务推理演示(目标检测,图像分割,图像分类,姿态检测,带方向目标检测)
    查看>>
    OpenCV与AI深度学习 | YOLOv10在PyTorch和OpenVINO中推理对比
    查看>>
    OpenCV与AI深度学习 | YOLOv11来了:将重新定义AI的可能性
    查看>>
    OpenCV与AI深度学习 | YOLOv8自定义数据集训练实现火焰和烟雾检测(代码+数据集!)
    查看>>
    OpenCV与AI深度学习 | YOLOv8重磅升级,新增旋转目标检测,又该学习了!
    查看>>
    OpenCV与AI深度学习 | 一文带你读懂YOLOv1~YOLOv11(建议收藏!)
    查看>>
    OpenCV与AI深度学习 | 五分钟快速搭建一个实时人脸口罩检测系统(OpenCV+PaddleHub 含源码)
    查看>>