Web开发:ASP.NET CORE中前端使用Ajax定时获取后端数据

一、低难度(刷新a标签)

1、需求

      给a标签每15s刷新一次,显示最新的时间(时间必须由后端获取) 应该如何操作呢

2、代码

后端

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using WebApplication1.Models;namespace WebApplication1.Controllers
{public class MainController : Controller{public IActionResult Index(){var currentTime = DateTime.Now.ToString("HH:mm:ss");ViewBag.CurrentTime = currentTime;return View(); // 当前时间传给对应的视图(/Views/Main/Index)}// Action 用于获取最新时间的方法public IActionResult GetCurrentTime(){var currentTime = DateTime.Now.ToString("HH:mm:ss");return Content(currentTime);  // 直接返回字符串}}
}

前端

@{var now = ViewBag.CurrentTime; // 初始化获取时间
}<h1>测试页面</h1><a id="showtime">当前的时间是:@now</a> <!-- Razor 语法中输出变量值的正确方式 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>// 定义一个函数来更新时间显示function updateTime() {// 使用 Ajax 请求获取最新时间$.ajax({url: '@Url.Action("GetCurrentTime", "Main")',  // ajax发送get请求到Main控制器下的GetCurrentTime方法中type: 'GET',success: function (data) {$('#showtime').text('当前的时间是:' + data);},error: function () {console.log('无法获取最新时间');}});}// 页面加载完成后立即执行一次,并且每隔15秒执行一次$(document).ready(function () {updateTime();  // 初始化页面加载时获取一次最新时间setInterval(updateTime, 15000);  // 每15秒调用一次该方法});
</script>

二、中难度(刷新表格table) 

1.需求

        每隔十秒更新一下table里面的数据

2.代码

        后端:   

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using WebApplication1.Models;namespace WebApplication1.Controllers
{public class MainController : Controller{public class Student{public int Id { get; set; }public string Name { get; set; }}public IActionResult Index(){List<Student> list = new List<Student>();list.Add(new Student { Id=1,Name="小虹"});list.Add(new Student { Id = 2, Name = "小美" });list.Add(new Student { Id = 3, Name = "小刚" });ViewData["Student"] = list;return View(); }public IActionResult GetStudentList(){Random rnd = new Random();int randomNumber = rnd.Next(1, 101); // 生成一个1到100之间的随机整数int randomNumber2 = rnd.Next(1, 101); // 生成一个1到100之间的随机整数int randomNumber3 = rnd.Next(1, 101); // 生成一个1到100之间的随机整数List<Student> list = new List<Student>{new Student { Id = 1, Name = $"小虹{randomNumber}" },new Student { Id = 2, Name = $"小美{randomNumber2}" },new Student { Id = 3, Name = $"小刚{randomNumber3}" }};return Json(list);}}
}

前端:

@using static WebApplication1.Controllers.MainController
@{var list = ViewData["Student"] as List<Student>;
}<h1>学生列表</h1><table class="table" id="studentTable"><thead><tr><th>ID</th><th>姓名</th></tr></thead><tbody>@foreach (var student in list){<tr><td>@student.Id</td><td>@student.Name</td></tr>}</tbody>
</table><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>function updateStudentTable() {// 使用 AJAX 请求更新数据$.ajax({url: '@Url.Action("GetStudentList", "Main")', // 调用Get请求,访问后端的Main控制器的GetStudentList方法type: 'GET',success: function (data) {// 清空表格内容$('#studentTable tbody').empty();// 遍历新数据并添加到表格中data.forEach(function (student) {$('#studentTable tbody').append(`<tr><td>${student.id}</td><td>${student.name}</td></tr>`);});}});}// 初始化页面加载数据//updateStudentTable();// 定时器,每隔10秒调用一次方法setInterval(updateStudentTable, 10000); // 10秒间隔
</script>

 三、注意事项

不要忘记引用Jquery库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3266989.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

液态神经网络到底是什么?

液体神经网络是一种应用范围极其广泛的机器学习工具&#xff0c;不仅可以像传统神经网络那样学习并执行图像识别、自然语言处理和语音合成等多种任务&#xff1b;还突破了传统神经网络难以适应随时间变化的新数据的限制&#xff0c;能够应用于医学诊断和自动驾驶等涉及动态和不…

【Plotly-驯化】一文教你通过plotly画出动态可视化多变量分析:create_scatterplotmatrix

【Plotly-驯化】一文教你通过plotly画出动态可视化多变量分析&#xff1a;create_scatterplotmatrix 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &am…

无法解析插件 org.apache.maven.plugins:maven-war-plugin:3.2.3(已解决)

文章目录 1、问题出现的背景2、解决方法 1、问题出现的背景 最开始我想把springboot项目转为javaweb项目&#xff0c;然后我点击下面这个插件 就转为javaweb项目了&#xff0c;但是我后悔了&#xff0c;想要还原成springboot项目&#xff0c;点开项目结构关于web的都移除了&am…

MySql 触发器、存储器练习

一&#xff1a; 触发器 1、建立两个表:goods(商品表)、orders(订单表) 查看数据库&#xff1a;mysql> show databases; 使用数据库&#xff1a;mysql> use mydb16_trigger; 创建goods表&#xff1a; mysql> create table goods(gid char(8) not null primary key, …

海外发稿:打造希腊媒体宣发新局面

随着全球经济一体化的不断深入&#xff0c;企业对于海外市场的拓展需求日益迫切。在这个过程中&#xff0c;媒体宣发作为一种有效的市场推广手段&#xff0c;已经成为企业出海的重要策略之一。希腊&#xff0c;作为欧洲的重要经济体&#xff0c;拥有丰富的文化底蕴和众多的历史…

自动IP地址vs固定IP地址:哪个更快?深度解析与比较

在数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。而在网络配置中&#xff0c;IP地址的选择——无论是自动获取还是固定设置&#xff0c;都是影响网络性能和管理的关键因素之一。许多人常常疑惑&#xff1a;自动IP地址和固定IP地址哪个快一点&…

Linux中如何用ida调试fork后的子进程

原文链接 > https://redqx.github.io/linux/2024/07/24/linux-debugfork.html 本文的一些图片引用可能有一些问题, 比如数据不对劲,但无伤大雅 自己懒得粘贴图片了 环境: wsl-kali-2024 ida-7.7 插件: Lazy_ida, 还有一个什么插件不知道什么名字, 可以把汇编转字节码 …

基于PaddleClas的人物年龄分类项目

目录 一、任务概述 二、算法研发 2.1 下载数据集 2.2 数据集预处理 2.3 安装PaddleClas套件 2.4 算法训练 2.5 静态图导出 2.6 静态图推理 三、小结 一、任务概述 最近遇到个需求&#xff0c;需要将图像中的人物区分为成人和小孩&#xff0c;这是一个典型的二分类问题…

DLMS/COSEM中公开密钥算法的使用_椭圆曲线加密法

1.概述 椭圆曲线密码涉及有限域上的椭圆曲线上的算术运算。椭圆曲线可以定义在任何数字域上(实数、整数、复数)&#xff0c;但在密码学中&#xff0c;椭圆曲线最常用于有限素数域。 素数域上的椭圆曲线由一组实数(x, y)组成&#xff0c;满足以下等式: 方程的所有解的集合构成…

7月23日JavaSE学习笔记

异常&#xff1a; 程序中一些程序处理不了的特殊情况 异常类 Exception 继承自 Throwable 类&#xff08;可抛出的&#xff09; Throwable继承树 Error&#xff1a;错误/事故&#xff0c;Java程序无法处理&#xff0c;如 OOM内存溢出错误、内存泄漏...会导出程序崩溃 常见的…

结构拼图的艺术——组合模式(Python实现)

大家好&#xff0c;今天我们继续来讲结构型设计模式&#xff0c;上一期我们介绍了桥接模式&#xff0c;帮助大家理解了如何通过分离抽象部分和实现部分来实现代码的解耦。 今天&#xff0c;我们将介绍另一个非常实用的设计模式——组合模式&#xff0c;这个模式特别适合用于处…

Vue实现简单小案例

一、创建文件夹 二、引用vue.js <script src"../js/vue.js"></script> 三、准备一个容器 <div id"app"><h1>Hello,{{name}}</h1> </div> 四、创建实例 <script>new Vue({el:"#app", //el用于指…

Godot入门 03世界构建1.0版

在game场景&#xff0c;删除StaticBody2D节点&#xff0c;添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块&#xff0c;自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式&#xff0c;TileMap选择绘制&#xff0c;选中图块后在…

60V_20A超大电流LED照明车灯舞台灯同步降压芯片,驱动效率达99%并具有PWM极佳调光功能

简介 PC1226 是一款同步降压驱动控制芯片&#xff0c;用于驱动大功率 LED。芯片工作电压范围 7~60V&#xff0c;能够稳定输出高达数十安培的驱动电流&#xff0c;且有着极高的转换效率。 PC1226 集成了 PMOS 驱动模块&#xff0c;用于驱动高侧的 PMOS 功率 MOS&#xff0c;与…

【NPU 系列专栏 2 -- NVIDIA 的 H100 和 H200 是什么?】

请阅读【嵌入式及芯片开发学必备专栏】 文章目录 NVIDIA H100 和 H200 芯片NVIDIA H100 芯片简介NVIDIA H100 主要特点NVIDIA H100 应用场景NVIDIA H100 使用举例NVIDIA H200 芯片简介NVIDIA H200 主要特点NVIDIA H200 应用场景NVIDIA H200 使用举例Summary NVIDIA H100 和 H20…

甲方怒斥!!!为什么媒体不按原稿发布?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 前几天执行了一个媒体邀约的项目&#xff0c;邀约媒体参会&#xff0c;以及活动现场一切都很顺利&#xff0c;稿件同步的很晚&#xff0c;但还是让几个媒体连夜进行了刊登报道&#xff0…

AutoMySQLBackup execution.. Backup failed Docker部署mysql 自动备份失败!!

摘要&#xff1a; Docker容器部署的mysql5.7版本遇到使用AutoMYSQLBackup备份失败了&#xff0c;反复修改automysqlbackup.conf也不起效。这里推荐一种新的办法绕开老路子直接备份。 目录 一、环境介绍 二、AutoMYSQLBackup 三、问题描述 四、解决思路 4.1第一种解决思…

用cmake创建一个c++工程,调用c语言函数打印“c hello!”。

要使用CMake创建一个C工程&#xff0c;并在其中调用C语言函数以打印“C hello!”&#xff0c;你可以按照以下步骤操作&#xff1a; 1. 项目目录结构 首先&#xff0c;确保你的项目目录结构如下&#xff1a; CPlusPlusWithCLibrary ├── CMakeLists.txt └── src├── m…

C++的map和set介绍

系列文章目录 二叉树搜索树 map和set习题 文章目录 系列文章目录前言一、关联式容器键值对二、树形结构的关联式容器2.1 set2.1.1 set的介绍2.1.3 set的使用删除节点find的不同效率count举例lower_bound 和 upper_bound 2.2 multiset2.2.1 区别&#xff1a;find查找erase删除e…

【深度学习】大模型GLM-4-9B Chat ,微调与部署(3) TensorRT-LLM、TensorRT量化加速、Triton部署

文章目录 获取TensorRT-LLM代码&#xff1a;构建docker镜像并安装TensorRT-LLM&#xff1a;运行docker镜像&#xff1a;安装依赖魔改下部分package代码&#xff1a;量化&#xff1a;构建图&#xff1a;全局参数插件配置常用配置参数 测试推理是否可以代码推理CLI推理 性能测试小…