让前端与后端异步起来

有时，后台处理批量数据，需要一定的时间，如果处理一部分往前台送一部分，用户体验要好一些，这样就用到这个知识点了。

后台代码中下：

[HttpGet("/getents")]public async IAsyncEnumerable<Entity> GetEntitys(){           for (var i = 0; i < 20; i++){_logger.LogInformation(i.ToString());await Task.Delay(RandomNumberGenerator.GetInt32(100, 500));yield return new Entity { ID = i, Time = DateTime.Now };}}

前端代码，从后台取到数据后，展现在前端(我这里是拼接，用vue也可以)，因为数据没有取完，所以不是一个完整的json字符串，需要在最后加上“]”

@{ViewData["Title"] = "Home Page";
}
<div class="text-center"><h1 class="display-4">实时加载</h1><div id="divmessage" class="alert alert-warning" role="alert"><span id="message"></span></div><ul id="data" class="list-group"></ul>
</div>
@section Scripts{
<script>$(function() {var xhr=new $.ajaxSettings.xhr();  xhr.onreadystatechange=function(){if(xhr.readyState==3){var list=JSON.parse(xhr.responseText.replace(']','')+']');$("#message").html("加载中…… 【"+list.length+"】")var html=""$(list).each(function(index,item){html+='<li  class="list-group-item">'+item.id+"  "+item.time+"</li>"})$("#data").html(html)}else if(xhr.readyState==4){var list=JSON.parse(xhr.responseText.replace(']','')+']');$("#message").html("加载完成，共"+list.length+"条记录")$("#divmessage").removeClass("alert-warning")$("#divmessage").addClass("alert-success")}}xhr.open('GET', '/getents')xhr.send()});
</script>
}

效果是后台处理一块，就返回一块，前台展示一块，因为这里不能放视频和动图，所以可以自行运行结果看一下（.net6），或脑补一下效果。

让前端与后端异步起来相关推荐

web服务器与网页表单通信,前端与后端通信的几种方式
只有知道了历史,才能更好的把握现在和未来. 在项目中,通常前端开发主要完成两件事情,一是界面搭建,一是数据交互. 下面是我总结前端与后端交互的几种方式,本文只作简单介绍,不做深入了解. 一.AJAX ...
《单页Web应用：JavaScript从前端到后端》——1.4 小结
本节书摘来自异步社区<单页Web应用:JavaScript从前端到后端>一书中的第1章,第1.4节,作者:[美]Michael S. Mikowski , Josh C. Powell著, ...
[转载] 全方位提升网站打开速度：前端、后端、新的技术
原文地址:Building a Shop with Sub-Second Page Loads: Lessons Learned 原文作者:Erik Witt 译文出自:掘金翻译计划译者:luoya ...
前端校验和后端校验区别
前台验证数据格式后台验证的是数据的正确性当下流行的系统架构方案中,前端和后端都是分离开的. 目的:① 为了方便前端开发人员和后端开发人员可以同时开发:② 前后端分离也使得前后端的代码可以分开进行管 ...
前端：后端，我要分手，你不适合我
一.前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服 ...
Web前端和后端开发的区别和要求
Web前端和后端开发的区别和要求有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...
网站前端，后端设计，系统设计常识
系统设计第一次课听课笔记网站分为前端和后端前端就是大家看到的网站界面,类似美女的外表: 后端就是网站的架构设计,类似美女的内心,肚子里有多少东西,无法直接看出来. 后端工程师很苦逼,网站有问题,随 ...
ajax获取checkbox循环出来的值_Django:前后端异步加载数据(循环大法)
距离上一次发文过去两个月,这段时间将Django,Bootstrap,JQuery收入囊中开始写Django的一些笔记,祭奠那掉了一地的头发关于Django项目创建和基础介绍,本篇不做介绍,主要介 ...
JAVA前端与后端交互面试题
1.前端与后端交互面试题 1.1. 描述Servlet调用过程? 答案: (1)在浏览器输入地址,浏览器先去查找hosts文件,将主机名翻译为ip地址,如果找不到就再去查询dns服务器将主机名翻译成i ...

让前端与后端异步起来

让前端与后端异步起来相关推荐

最新文章

热门文章