前端页面展示列表的问题

现在项目中有一个小需求,有一个页面需要展示一些从数据库中查询出来的业务,该页面每行最多展示3个业务,不限行数。具体多少业务由数据库中内容决定。我用ajax通过查询语句将数据封装成一个集合传递到前端,请问在前端js中我该怎么拼写一个页面?

2个回答

for遍历返回的数据组合html添加到容器就行了。如果你连组合都想省略,可以用jqGrid,easyui的datagrid之类的组件,只需要提供数据源,分页和显示自动帮你处理

@showbo 但是现在我对获取到的集合的长度不清楚,因为每一行最多只能显示3个业务,在for循环的时候必须要先判断长度,然后根据长度来选择for循环的次数,for循环每次最多稚嫩循环3次,这样做的话我的循环就太多了。我想找个简单的方法,不要让我搞太多的判断,或者通过其他的方法将每行显示自动限制在3个业务之内不需要我判断也行!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
数据库数据到前端页面

如何使mysql数据库的数据显示在前端jsp页面的数据表中 action方法 public String all(){ try{ System.out.println("进入all"); SMCompanyHome smcompanyHome=new SMCompanyHome(); smcompanyHome.getSession().clear(); String sql="from s_m_company"; Query query = smcompanyHome.getSession().createQuery(sql); List<SMCompany> list=query.list(); result=new ArrayList<SMCompany>(); /* this.setResult(query.list());*/ for(SMCompany sm: list){ System.out.println(sm.getSMCompanyName()+sm.getSMCompanyNumber()+sm.getSMCompanyLpName()+sm.getSMCompanyAddress()+sm.getSMCompanyRange()+sm.getSMCompanyRegion()+sm.getSMCompanyRemarks()+sm.getSMCompanyPhone()+sm.getSMCompanyId()); result.add(sm); smcompanyHome.getSession().getTransaction().commit(); smcompanyHome.getSession().close(); }}catch(HibernateException e){ e.getStackTrace(); } return "result"; } }

java前后端分离之后前端怎么展示数据

我开发的是安卓手机APP 界面用的是html 数据是通过ajax从后台获取的 然后后台返回json数据给前端 问题就在这 前端怎么把返回的json数据显示到html中 因为我了解到html中不能使用JSTL和EL表达式.......我唯一想到的办法就是在js里面定义一个变量然后变量里面存的是网页代码 再写到html页面中 我觉得这样写好麻烦 有什么比较方便的办法吗?

前端界面如何展示本地符盘图片

项目前端界面要读取本地D盘下yueyang图片,后台不用流,前端img标签如何写路径?我试过在Tomcat里面配置映射但是没用,不知道是我配置错了还是什么原因,请问配置映射这种方法行得通的吗?下面贴上配置的图片![图片说明](https://img-ask.csdn.net/upload/201710/19/1508392717_308011.png)![图片说明](https://img-ask.csdn.net/upload/201710/19/1508392730_292446.png)![图片说明](https://img-ask.csdn.net/upload/201710/19/1508392755_807346.png)![图片说明](https://img-ask.csdn.net/upload/201710/19/1508392765_232918.png)

关于网站前端页面访问MYSQL数据库的数据

我有一个前端页面,但是我想通过前端页面来访问MYSQL数据库,我该从哪方面入手呢?谢谢!

有关后端数据在前端展示的问题

``` https://www.cnblogs.com/neal-ke/p/8746163.html 上面是博客园一篇文章的地址,采用的是 域名/用户名/p/文章id.html 的格式(我猜的) ``` 1,我想问问这种技术是如何实现的? 2,是不是用户注册成功就会生成一个该用户的文件夹,以后用户提交的文章,都会生成一个html文件保存在该文件夹下? 3,用户访问到html界面并不是单纯的包含文章内容,还有导航栏,标签,...,是咋整的?是用jsp动态生成的吗?那html的名字是如何生成的呢? 4,嗯,有点乱 5,各位大哥,多担待,拜谢

关于运用ajax如何在前端页面显示数据

后台返回一个<list>集合,如何在前端将数据显示出来? 如何在ajax里面写呢? ![图片说明](https://img-ask.csdn.net/upload/201611/18/1479452055_517644.png)

数据源是法律文书,前端WEB页面仿图书浏览展示,有什么好的实现方式?

<p>有点类似http://www.cssrain.cn/article.asp?id=176中的效果,在页面浏览中仿图书浏览,可以上下翻页,并有翻页效果,有鼠标右键效果,快速返回目录。不知道大家能否提供一些现有Javascript实现?</p>

怎么用ajax把数据库的数据显示在基于vue前端页面上?

毕业设计软硬件结合时,怎么把传感器采集的数据显示到前端页面(用vue jquery等写的页面)然后存储到数据库,再进行历史查询

前端页面如何实现可填入数据的表格

![图片说明](https://img-ask.csdn.net/upload/201702/21/1487648461_104833.png)

利用ajax动态的提取mysql中的数据,并且在前端页面中展示出来

代码如下: 前端html: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--<script type="text/javascript" src="jquery.js"></script>--> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html> <script> var app = { xvalue: [], yvalue: [], z:[], }; // 发送ajax请求,从后台获取json数据 $(document).ready(function () { getData(); console.log(app.value1); console.log(app.timepoint) console.log(app.predictvalue1) }); function getData() { $.ajax({ url: '/test', data: {}, type: 'POST', async: false, dataType: 'json', success: function (data) { app.value1 = data.value1; app.predictvalue1=data.predictvalue1; value1 = app.value1; predictvalue1=app.predictvalue1; function trueData(i) { now = new Date(+now + oneDay); value = value1[i]; return { name: now.toString(), value: [ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value) ] } } function predictData(i) { now1 = new Date(+now1 + oneDay); predictvalue = predictvalue1[i]; return { name: now1.toString(), value: [ [now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'), Math.round(predictvalue) ] } } var data = []; var predictdata=[]; var now = +new Date(1997, 9, 3); var now1 = +new Date(1997, 9, 4); var oneDay = 24 * 3600 * 1000; for (var i = 0; i < value1.length; i++) { data.push(trueData(i)); } for (var i = 0; i < predictvalue1.length; i++) { predictdata.push(predictData(i)); } // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '动态数据 + 时间坐标轴' }, tooltip: { trigger: 'axis', formatter: function (params) { params = params[0]; var date = new Date(params.name); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '真实数据', type: 'line', showSymbol: false, hoverAnimation: false, data: [], markLine: { itemStyle: { normal: { borderWidth: 1, lineStyle: { type: "dash", color: 'red', width: 2 }, show: true, color: '#4c5336' } }, data: [{ yAxis: 900 }] } }, { name: '预测数据', type: 'line', showSymbol: false, hoverAnimation: false, data: [], markLine: { itemStyle: { normal: { borderWidth: 1, lineStyle: { type: "dash", color: 'blue', width: 2 }, show: true, color: '#4c5336' } }, data: [{ yAxis: 900 }] } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); setInterval(function () { for (var i = 0; i < 1; i++) { data.shift(); data.push(trueData(i)); } for (var i = 0; i < 1; i++) { predictdata.shift(); predictdata.push(predictData(i)); } myChart.setOption({ series: [{ data: data }, { data: predictdata }] }); }, 1000); } }) } </script> </body> </html> ``` 后端py,用的是flask框架: ``` import MySQLdb from flask import Flask, render_template, url_for import pymysql import pandas as pd import numpy as np from pandas import read_csv import matplotlib.pyplot as plt from sklearn.preprocessing import MinMaxScaler from sklearn.metrics import mean_squared_error from keras.models import Sequential from keras.layers import LSTM, Dense, Activation,Dropout import json import operator from functools import reduce import math import tensorflow as tf from keras import initializers import time # 生成Flask实例 app = Flask(__name__) @app.route("/") def hello(): return render_template('new_file.html') # /test路由 接收前端的Ajax请求 @app.route('/test', methods=['POST']) def my_echart(): # 连接数据库 conn = MySQLdb.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test', charset='utf8') cur = conn.cursor() sql = 'SELECT timepoint,value1 from timeseries' cur.execute(sql) u = cur.fetchall() timepoint = [] value1 = [] for data in u: value1.append(data[1]) timepoint.append(data[0]) print(value1) # 转换成json格式 jsonData = {} jsonData['value1'] = value1 jsonData['timepoint']=timepoint # json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错,因此将数据写入时需要用到此函数 j = json.dumps(jsonData) cur.close() conn.close() # 在浏览器上渲染my_template.html模板(为了查看输出数据) return (j) if __name__ == '__main__': app.run(debug=True,port='5000') ``` 返回的数据是从mysql中读取的,现在我想用ajax的方法定时请求数据库的下一个数据到达前台,并且刷新页面显示出来,应该怎么修改代码? 数据库如下: ![图片说明](https://img-ask.csdn.net/upload/201905/24/1558685991_221903.jpg)

web页面展示-层级关系

在web页面除了树形结构。还有什么结构可以展现层级关系,现在主流是什么?

要做一个电商网站后台使用的ssm框架前端页面想要实现那种自动生成静态页面的技术求大神推荐

要做一个电商网站后台使用的ssm框架前端页面想要实现那种自动生成静态页面的技术求大神推荐

miniUI列表展示问题,求大佬解答

开发前端,使用miniUI遇到了一个业务问题 如图 前端需要 展示成的数据格式 ![图片说明](https://img-ask.csdn.net/upload/201906/25/1561456488_15125.png) 后端sql ![图片说明](https://img-ask.csdn.net/upload/201906/25/1561456533_733186.png) 数据是这样的,**miniUI可以根据查询到的年份数据展示成这样吗**

前端get请求后接收服务器发来的页面,怎么跳转实现跳转到该页面

前端get请求页面,服务器发送index.html页面文件,或者重定向到index.html页面,都只是发送了个index.html文件过来而已,但是页面还没有跳转,怎么实现跳转呢?页面是服务器渲染的动态页面,不能直接输入index.html 的

Spring boot 前端页面跳转的时候,用户请求数据,后台怎么知道是谁在请求

第一次做web,一个问题,就是用户登录了,访问其他页面的时候肯定要向服务器请求数据,那服务端怎么知道这个人是谁呢,也就是说前端请求的时候用什么来表明 自己身份呢? Spring boot+前端themleaf的(或者纯的HTML) 查了,2种方法: 1,用户登录时候,后台保存了session(安全登录验证了),然后这个session会一同返回给前端,只不过 返回的是一个id值,并不能直接获取session保存的值,以后只要没有注销,那就ajax请求获得后台保存的session值,我保存用户id,然后用这个id去请求数据 2,前端使用cookie保存用户信息和1差不多 跪求大佬们,其他的思路

jquery easyui查询数据到页面展示问题。

我有一个用户表,用户表的外键对应一个联系人表,我在查询用户的时候想在页面展示对应的联系人,可是json根本就解析不出来,有什么方法可以解决。

TP5点击了一个链接应该会跳转到一个前端的页面,结果直接调用了方法怎么办?

TP5小白一个。 想要在项目中新增一个导入.CSV的功能。新建了一个前端页面: ![图片说明](https://img-ask.csdn.net/upload/201904/11/1554970332_325097.png) 在浏览器中输入前端页面的路径,却直接调用了写在User.php的方法: ![图片说明](https://img-ask.csdn.net/upload/201904/11/1554970376_749256.png) 页面结果: ![图片说明](https://img-ask.csdn.net/upload/201904/11/1554970420_177791.png) 跳转页面的链接是: ![图片说明](https://img-ask.csdn.net/upload/201904/11/1554970580_145272.png) 麻烦大神讲解一下,小白感激不尽!

前端如何将页面中的某个div生成图片并且显示在当前页面中,是显示不是下载!。

如题,前端如何将页面中的某个div生成图片并且显示在当前页面中,是显示在页面当中,不是下载下来! div中的内容是从后端获取的数据。。

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

再不跳槽,应届毕业生拿的都比我多了!

跳槽几乎是每个人职业生涯的一部分,很多HR说“三年两跳”已经是一个跳槽频繁与否的阈值了,可为什么市面上有很多程序员不到一年就跳槽呢?他们不担心影响履历吗? PayScale之前发布的**《员工最短任期公司排行榜》中,两家码农大厂Amazon和Google**,以1年和1.1年的员工任期中位数分列第二、第四名。 PayScale:员工最短任期公司排行榜 意外的是,任期中位数极小的这两家公司,薪资...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

数据库——玩转SQL语句(以MySQL为例)

一、前言 照着大学的SQL server来学

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

华为初面+综合面试(Java技术面)附上面试题

华为面试整体流程大致分为笔试,性格测试,面试,综合面试,回学校等结果。笔试来说,华为的难度较中等,选择题难度和网易腾讯差不多。最后的代码题,相比下来就简单很多,一共3道题目,前2题很容易就AC,题目已经记不太清楚,不过难度确实不大。最后一题最后提交的代码过了75%的样例,一直没有发现剩下的25%可能存在什么坑。 笔试部分太久远,我就不怎么回忆了。直接将面试。 面试 如果说腾讯的面试是挥金如土...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

程序员毕业去大公司好还是小公司好?

虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。 大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。 目录: 技术氛围 内部晋升与跳槽 啥也没学会,公司倒闭了? 不同的人脉圈,注定会有不同的结果 没能去大厂怎么办? 一、技术氛围 纵观整个程序员技术领域,哪个在行业有所名气的大牛,不是在大厂? 而且众所...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

01、Java入门(Getting Started);02、集成开发环境(IDE);03、项目结构(Eclipse JavaProject);04、类和对象(Classes and Objects);05:词法结构(Lexical Structure);06:数据类型和变量(Data Type and Variables);07:运算符(Operators);08:控制流程语句(Control Flow Statements);

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

立即提问
相关内容推荐