前端处理后台传来大量数据的方法

最新推荐文章于 2024-05-06 10:40:40 发布
最新推荐文章于 2024-05-06 10:40:40 发布
阅读量4.4k 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/giveMe_Five/article/details/105744967
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul></ul>
</body>
<script>
    // 方法1:  会因为页面数据过多而卡顿
    // const number = 99999;
    // let ul = document.querySelector("ul");
    // for (var i = 0; i < number; i++) {
    //     let li = document.createElement('li');
    //     li.innerText = i;
    //     ul.appendChild(li);
    // }

    // 方法2: 不影响正常浏览
    // let ul = document.querySelector("ul");
    // let pageInfo = {
    //     pageIndex: 0,
    //     pageSize: 50,
    //     totalNum: 99999
    // }
    // // 循环加载数据
    // function loop(curTotal, curIndex) {
    //     if (curTotal <= 0) {
    //         return false;
    //     }
    //     //每页多少条
    //     let pageCount = Math.min(curTotal, pageInfo.pageSize);
    //     setTimeout(() => {
    //         for (let i = 0; i < pageCount; i++) {
    //             let li = document.createElement('li');
    //             li.innerText = curIndex + i;
    //             ul.appendChild(li);
    //         }
    //         loop(curTotal - pageInfo.pageSize, curIndex + pageCount);
    //     }, 0)
    // }
    // loop(pageInfo.totalNum,pageInfo.pageIndex);


    //方法3:

    let ul = document.querySelector("ul");
    
    ul.οnscrοll=scroll();
    
    function scroll() {
        let scrollTop = ul.scrollTop;
        let scrollHeight = ul.scrollHeight;
        let clientHeight = ul.clientHeight;
        if ((scrollTop + clientHeight) == scrollHeight) {
            alert("上拉加载")
        }
    }
</script>
</html>

 

giveMe_Five
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
post请求数据量太大，提交到后台取不到数据
叫我泽西哥好吗？（手动滑稽 ‾◡◝）
07-14 2410
web服务器 tomcat-8.5.31 修改server.xml配置文件 &lt;Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/&gt; 修改后 &lt;Connector port...
js前端Excel大数据处理导入
07-05
随着Web应用程序对数据处理能力的需求提升，前端工程师必须找到有效地处理大量数据的方法，而不仅仅是依赖后端服务器。本主题将深入探讨如何使用JavaScript来处理Excel文件，尤其是面对大数据量时的策略。 首先，...
前端如何处理大量数据。
m0_67318913的博客
01-08 559
前端处理海量数据
2024年Web前端最新后端一次性传了10w条数据，前端该如何处理？—— 面试高频，我的前端美团求职之路
最新发布
2401_84435739的博客
05-06 656
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】index.js 代码如下// 创建请求// 这里请求的是本地服务器})4. 常规处理方案console.time(‘列表时间’)});console.timeEnd(‘列表时间’)这种方案就是简单粗暴的循环渲染此方案耗时大概是13s这种做法当然是不可取的，等到天都黑了，用户可能会骂娘5. 优化的第一种方式 —— 前端分页。
接口数据量太大，导致内存溢出，解决办法
热门推荐
weixin_42973143的博客
10-17 2万+
https://ea.azure.com/report/ 公司查询报表出现问题，只能通过月份进行筛选，得到的数据过于庞大，导致查询运行缓慢，并且插入数据库异常出错，内存过大。 想到的办法： 1，查询接口是否有其他参数控制条件，分批次获取 2，解决数据库插入问题（不能根本解决问题，数据量大，获取数据依然会缓慢） Get azure usage: 首先，查询查询接口相关方法： 1，htt...
前后台交互的传参方式与大参数传递
iteye_8564的博客
05-07 373
[size=medium] 前台向后台传参，一般有如下几种方式： 1）URL方式传参 这种方式传参时，首个参数置于url的后面，用“?”连接；形式：url?param=value 如：http://zhidao.baidu.com/q?word=%D6%BD%B1%D2+%CB%BA%BB%D9 多个参数时，参数间用“&”连接， 例如：http://zhidao.baidu.com/q...
一次性返回十万条数据前端怎么优化
九亿宅男的梦的博客
08-23 629
例如，使用浏览器的本地缓存（LocalStorage或IndexedDB）或者内存缓存（如Redux、Vuex）来存储已加载的数据，下次再请求相同数据时可以直接从缓存中读取，减少与服务器的交互次数。如果后端数据量很大且无法分页，可以考虑在后端对数据进行压缩或者分批处理，将数据分割成多个较小的请求返回给前端，前端再进行合并和展示。对返回的数据进行压缩，如使用Gzip或Brotli等压缩算法进行压缩，减少数据传输的大小。将数据进行分页，每次只请求部分数据，用户滚动或点击翻页时再加载下一页的数据。
Django实现将一个字典传到前端显示出来
12-20
首先，我们来看一下后台代码部分： ```python fielddict = {'name': '张三', 'age': 18} return render(request, 'test.html', {'field': fielddict}) ``` 这里的`fielddict`是一个Python字典，包含了两个键值对：...
ajax请求后台数据实现分页功能
07-05
在网页开发中，分页是一种常见的用户界面设计，它允许用户逐步浏览大量数据，而无需一次性加载所有内容，从而提高页面加载速度并优化用户体验。AJAX（Asynchronous JavaScript and XML）技术是实现这一功能的关键，...
蓝色安全漏洞检测系统后台模板
03-13
【标题】：“蓝色安全漏洞检测系统后台模板”是一款专门...综上，"蓝色安全漏洞检测系统后台模板"是一个集成了多种前端技术和网络安全理念的开发资源，对于希望快速构建安全检测系统的开发者来说，具有很高的实用价值。
js传参数到后台读取数据再传到前台的例子
09-05
本文将详细介绍如何使用JavaScript传递参数到后台，读取数据库数据，然后将这些数据返回到前端进行处理。 首先，让我们理解基本概念： 1. **Ajax**：Asynchronous JavaScript and XML（异步JavaScript和XML），...
计算机网络基础(十八)---传输层-TCP的流量控制
self_realian的博客
08-13 713
文章内容概览 TCP协议的流量控制 流量控制是TCP协议特有的功能，对于UDP或者其它的一些协议，是没有流量控制 流量控制，简单的来说就是，接收方希望发送方将数据发送的慢一些。一般来说，我们是希望越快越好，但是，还是需要考虑一些实际的情况。比如接收方不能那么快的去接收很大的流量，所以希望发送方的流量慢一些。这就是流量控制 流量控制指让发送方发送速率不要太快 流量控制是使用滑动窗口来实现的 在TCP首部中有窗口这个字段，它占16个比特位，用来指明允许对方发送的数据量。在可靠传输的基本原理这篇文章中有结合
雪花算法生成id长度可控吗_分享一线互联网大厂分布式唯一ID设计 之 snowflake方案...
weixin_39566864的博客
11-21 720
欢迎关注头条号：老顾聊技术精品原创技术分享，知识的组装工目录前言回顾雪花算法优化思路启动场景的整体流程服务运行中流程临时节点的作用总结前言老顾之前在文章分享大厂分布式唯一ID设计方案，快来围观 中介绍了分布式唯一ID的一种方案，此方案满足了ID的基本要求1、整个系统ID唯一2、ID是数字类型，而且是趋势递增的3、ID简短，查询效率快但不适用订单ID的场景，因为竞争对手可以预测我们系统的订单量。之前...
如何在前端实现上万行大量数据的秒级响应？
忧郁的蛋的专栏
06-18 650
使用更高效的数据绑定方法，例如，使用Object.observe()或Proxy来替代使用setInterval()或setTimeout()来检查数据的变化。使用 WebAssembly 和 WebGL 来加速图形渲染，如使用canvas 或 WebGL来渲染表格数据。总之，要实现十万行数据的表格秒级响应，需要一系列技术和优化的结合，并需要根据具体情况进行调整。使用高性能的数据结构来存储数据，例如哈希表或二叉堆来提高查询和排序的性能。对于大量数据的表格，使用更高级的排序和筛选功能来减少需要渲染的数据量。
表单内容太大导致后台获取不了解决
liyanghao809433131的博客
01-05 3298
通过POST方式提交数据量过大，在后台接收不到数据，POST没有数据限制，查看代码发现确实是POST提交，问题出在哪里了呢？ 通过查看资料,发现tomcat默认传输最大的数据限制为2M,最后的解决办法是设大tomcat的conf下的server.xml中8080Connector的maxPostSize的值.(设为0是取消POST的大小限制) 打开tomcat目录下的conf目录，修改serv
vue 解决后台接口数据大，导致前台无法准确绑定数据问题
柳牧之的博客
02-18 1751
下面的代码是小编在，在项目中遇到的一个问题，然后通过定时任务的方式巧妙的给解决了。 问题：我们使用前后端分离的模式，后端通知把一个树的所有节点一下子反馈到我的前端，数据量大概有1万左右，我们独立测试时候:从后端取到数据需要12s，我构建树要2s。我们通过axios实现对后台的数据请求，由于测试发现axios是异步的，所有后台数据没有请求完，我就去设置树的默认节点，导致最后的结果是，树的默认节点绑定...
传给后台数组数据字段过多解决办法
尹小姐的博客
03-07 1514
传给后台的数组数据过于庞大，浏览器的post 对传给后台的字段受限制，导致很多数据过不去，也不安全时，将大数组，转换成json字符串格式的base64的加密格式，传给后台，后台再进行解密即可。 使用方法： 1、json 数组转json 字符串（序列化） var jsonArray = []; jsonArray.push({a:1,b:2}); jsonArray...
前台传输数据之后，后台接收不到数据
贺天远 廊坊师范学院信息技术提高班十五期
07-25 2438
今天遇到一个很奇怪的问题，就是我的前端已经将时间的参数传递了回去，但是在后台却接收不到时间的数据。 如下图所示，前端数据已经发送给后端。 数据库中的数据如下图所示，插入的这两条数据没有时间。 查看自己的代码之后发现逻辑没有问题，也没有报错，但是就是这个birthday传递不过来。 经过请求帮助发现自己的实体类中birthday字段没有set方法。所以前端的数据传递不过来，加上set方法就可以了。 ...
【工作记录】SpringMVC下js提交大数据量到controller失败解决
暂七师师长常乃超
02-28 2412
【前提】      js通过ajax提交数据到后台，一旦数据量大了，就会出现问题，比如：             【分析】      对于这个问题，目前场景中，数据的传输量在5M到20M之间，先通过js拼接成一个大的json串，之后在通过ajax发送post请求到达后端。      局部代码展示：      1.jsfunction submitForm() { layer.load(1,...
前端页面展示后台传来的数据
05-31
要在前端页面展示后台传来的数据，可以使用前端框架（如React、Vue、Angular等）或纯HTML/CSS/JavaScript。 以下是一些基本的示例： 1. 使用React： ```jsx import React, { useState, useEffect } from "react"; import axios from "axios"; function App() { const [data, setData] = useState([]); useEffect(() => { axios.get("/api/data").then((response) => { setData(response.data); }); }, []); return ( <div> <h1>Data from Backend</h1> <ul> {data.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); } export default App; ``` 这个示例使用React来展示从后台API `/api/data` 中获取的数据。`useEffect`钩子在组件加载时触发请求，并使用`useState`来更新组件状态以反映从后台获取的数据。在`return`中，将数据映射到列表项中。 2. 使用jQuery： ```html <!DOCTYPE html> <html> <head> <title>Data from Backend</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>Data from Backend</h1> <ul id="data-list"></ul> <script> $(document).ready(function() { $.get("/api/data", function(response) { $.each(response, function(index, item) { $("#data-list").append("<li>" + item.name + "</li>"); }); }); }); </script> </body> </html> ``` 这个示例使用jQuery来展示从后台API `/api/data` 中获取的数据。在`$(document).ready`中，使用`$.get`方法来获取数据，并使用`$.each`方法将数据映射到列表项中。 无论您使用哪种方法，都需要确保从后台获取正确的数据，并使用适当的方式将其展示在前端页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值