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://www.mzph.cn/diannao/48886.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决mysql5.0,Navicat for MySQL,IntelliJ IDEA之间中文乱码

使用软件版本 jdk-8u171-windows-x64 ideaIU-2021.1.3 mysql-essential-5.0.87-win32 navicat8_mysql_cs 这个问题我调试了好久&#xff0c;网上的方法基本上都试过了&#xff0c;终于是解决了。 三个地方结果都不一样。 方法一 首先大家可以尝试下面这种方法&#xff1a…

记录 cocos 开发问题 ,微信 wx.xxx函数 报找不到名称“wx”

今天写微信排行榜遇到 问题分享一下。 目前&#xff0c;微信、百度 和 抖音 小游戏这些平台为了保护其社交关系链数据&#xff0c;增加了 开放数据域 的概念&#xff0c;这是一个单独的游戏执行环境。开放数据域中的资源、引擎、程序&#xff0c;都和主游戏&#xff08;主域&a…

Vue-Plugin-HiPrint 打印设计

Vue-Plugin-HiPrint 是一个Vue.js的插件&#xff0c;旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint&#xff0c;您可以轻松地在Vue.js应用程序中实现高度定制的打印vue-plugin-hiprinthiprint.io

(秋招复习)自动驾驶与机器人中的SLAM技术(二)

秋招复习之--自动驾驶与机器人中的SLAM技术2 第五章 基础点云处理激光传感器与点云的数学模型最近邻问题准确率和召回率暴力最近邻栅格和体素方法二分树与K-d树四叉树和八叉树 拟合问题平面拟合直线拟合 第六章 2D激光定位与建图扫描匹配算法点到点的scan matching点到线的scan…

99:PostgreSQL开启SQL语句日志收集

为了开启连接PostgreSQL的各个客户端执行SQL语句的情况&#xff0c;开启SQL语句日志收集&#xff08;或者称SQL审计&#xff09;。 对postgresql.conf配置文件中下面项进行配置&#xff0c;示例如下&#xff1a; #是否开启日志收集&#xff08;包括系统日志、错误日志等&…

Sqlmap中文使用手册 - Detection模块参数使用

目录 1. Detection模块的帮助文档2. 各个参数的介绍2.1 --levelLEVEL2.2 --riskRISK2.3 页面对比 1. Detection模块的帮助文档 Detection:These options can be used to customize the detection phase--levelLEVEL Level of tests to perform (1-5, default 1)--riskRIS…

linux中不设置堆栈大小,默认大小是多少,怎么调用的

在Linux中&#xff0c;使用POSIX线程&#xff08;pthread&#xff09;库创建线程时&#xff0c;如果不显式设置堆栈大小&#xff0c;线程将使用系统默认的堆栈大小。这个默认大小可以因系统、发行版、甚至内核版本而异&#xff0c;但通常对于大多数现代Linux系统来说&#xff0…

C语言相关知识点(不定期更新内容)

coutinue只能在循环当中使用 关键字不能用作变量的 typedef是用来给类型取别名的变量 一条语句结束的时候后面要有分号 函数后面不写分号 int main( )是函数&#xff0c;大括号和里面的是函数体&#xff0c;函数和函数体之间不能有分号 void是无、空的意思&#xff0c;后面没有…

mybatis-plus模板引擎代码生成

网盘代码&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1jwuVGiA97dc1KVnGKc0c4g?pwd6666 提取码&#xff1a;6666 Gradle依赖&#xff1a; dependencies {// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starterimplementation org.…

android audio 相机按键音:(一)资源加载与替换

按键音&#xff0c;声音资源路径&#xff1a; frameworks\base\data\sounds\effects\ogg 对应路径&#xff0c;可见对应声音资源&#xff1a; camera_click.ogg camera_click_48k.ogg 编译加载声音资源mk&#xff1a; base/data/sounds/AllAudio.mk 加载资源规则: $(LOCAL_P…

oracle备份和恢复exp/imp-----从全库备份中恢复用户库解题思路

文章目录 从全库备份中恢复用户库的思路备份全库恢复用户库 从全库备份中恢复用户库的思路 备份全库 第一步&#xff1a;使用系统管理员账号将oracle整个导出备份----全库备份 1.exp system/system buffer65536 feedback100000 fully fileD:/exp.dmp logexp.log ---导出备份…

mysql 安装配置 next 按钮为什么置灰点击不了

“Next” 按钮变灰无法点击可能是由多种原因导致的&#xff0c;以下是一些常见的解决方法&#xff1a; 端口被占用&#xff1a;MySQL 默认使用 3306 端口&#xff0c;如果该端口被其他程序占用&#xff0c;就可能导致 Next 按钮无法点击。可以通过在命令提示符中输入 netstat …

linux系统设置开机启动的两种方法systemd及rc.local(手工写sh脚本,手工写service服务)

文章目录 知识点实验一、systemd&#xff08;一&#xff09;自写一个sh脚本并加入开机启动&#xff08;二&#xff09;源码安装的nginx加入开机启动 rc.local 知识点 在Linux系统中&#xff0c;有多种方法可以设置开机启动。以下是其中的一些主要方法&#xff1a; systemd 在较…

基于SSM的网上选课系统

系统背景 在当今信息化高速发展的时代&#xff0c;随着Internet的普及和高等教育规模的不断扩大&#xff0c;传统的手工选课方式已难以满足高校日益增长的管理需求。传统的选课方式不仅效率低下&#xff0c;还容易出现人为错误&#xff0c;导致资源浪费和管理成本上升。因此&am…

2959.力扣每日一题7/17 Java(暴力枚举+Floyd算法)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 Floyd算法 解题思路 解题过程 时间复杂度 空间复杂度 Floyd算法 …

python学习周报

day1&#xff1a; 一&#xff1a; # 1.注释快捷&#xff1a;Ctrl/ # 2.代码格式&#xff1a;CtrlaltL # 3.代码的上移一行:ctrlshift向上方向键 # 4.代码的下移一行:ctrlshift向下方向键 # 5.复制一行并下移 # 6.查找&#xff1a;ctrlF # 7.替换&#xff1a;ctrlR # 8.删除&…

Linux系统快速搭建轻量化网站Halo并实现无公网IP远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

AWE2025正式启动,AWE×AI 推动智慧生活的普及

7月18日&#xff0c;2025年中国家电及消费电子博览会&#xff08;AWE2025&#xff09;正式启动。主办方宣布&#xff0c;AWE2025的主题为“AI科技、AI生活”&#xff0c;展会将于2025年3月20-23日在上海新国际博览中心举办。 作为全球三大家电和消费电子领域展会之一&#xff…

MySQL的恢复与备份

MySQL的备份和恢复以及日志管理&#xff08;配置文件当中的设置&#xff09; 备份的目的&#xff1a;备灾 在生产环境中&#xff0c;数据的安全性非常重要。 造成数据丢失的原因&#xff1a; 1、程序出错 2、人为的问题 3、磁盘故障 备份的分类&#xff1a; 物理备份&a…

一个非常好的美图展示网站整站打包源码,集成了wordpress和开源版ripro主题,可以完美运营。

一个非常好的美图展示网站整站打包源码&#xff0c;集成了wordpress和开源版ripro主题&#xff0c;可以完美运营。 自带了5个多g的美图资源&#xff0c;让网站内容看起来非常大气丰富&#xff0c;可以快速投入运营。 这个代码包&#xff0c;原网站已经稳定运营多年&#xff0…