后端list集合中的数据传递到前台HTML中显示(表格形式)
关键字:web项目中前后台数据传递问题
在学习web项目的过程中,我们肯定会遇到前后台数据交换问题。这个问题我也思考了很久,今天借此总结一下。由于博主水平有限,如有不当之处,还请大家多多指正,,废话不所说进入正题。
一、HTML页面通过ajax发送http请求
1,前端有个普通的HTML页面,如下。
(页面引入了jquery,页面有个表格)
2,通过ajax发送请求
window.onload(function requestData(){
$.ajax({
url: "要访问的地址",
type: "post",
dataType: "json",
success: function(data){
/*这个方法里是ajax发送请求成功之后执行的代码*/
showData(data);//我们仅做数据展示
},
error: function(msg){
alert("ajax连接异常:"+msg);
}
});
});
3,后台的数据
@RequestMapping(value="/queryAllStudent")
public void query(HttpServletResponse resp) {
try {
/*list集合中存放的是好多student对象*/
List<Student> students = userService.getAllStudentInfo();
/*将list集合装换成json对象*/
JSONArray data = JSONArray.fromObject(students);
//接下来发送数据
/*设置编码,防止出现乱码问题*/
resp.setCharacterEncoding("utf-8");
/*得到输出流*/
PrintWriter respWritter = resp.getWriter();
/*将JSON格式的对象toString()后发送*/
respWritter.append(data.toString());
} catch (Exception e) {
e.printStackTrace();
}
}
public class student {
private int id;//id
private String name;//姓名
private String password;//密码 //省略get set方法。。。
}
4,前台展示数据(表格形式)
//展示数据
function showData(data) {
var str = "";//定义用于拼接的字符串
for (var i = 0; i < data.length; i++) {
//拼接表格的行和列
str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
//追加到table中
$("#tab").append(str); }
}
5,至此,完成了数据的传递
二、数据传送的流程
前台(html)发送ajax请求 --> 后台servlet中接受到请求,然后响应数据(来自数据库或其他) --> 前台(HTML)
ajax接受数据,处理数据(以表格显示).
最后测试一下显示效果
谢谢!
后端list集合中的数据传递到前台HTML中显示(表格形式)的更多相关文章
- VB6中的引用传递 与 VB.NET中的引用传递的区别
首先注意一点,在VB6中缺省参数传递的方式是:引用传递,而在VB.NET中缺省参数传递的方式是:值传递. 然后我们看下面VB6中的引用传递与VB.NET中的引用传递的对比. VB6中的引用传递 Pri ...
- C# Unity游戏开发——Excel中的数据是如何到游戏中的 (二)
本帖是延续的:C# Unity游戏开发——Excel中的数据是如何到游戏中的 (一) 上个帖子主要是讲了如何读取Excel,本帖主要是讲述读取的Excel数据是如何序列化成二进制的,考虑到现在在手游中 ...
- C# Unity游戏开发——Excel中的数据是如何到游戏中的 (三)
本帖是延续的:C# Unity游戏开发——Excel中的数据是如何到游戏中的 (二) 前几天有点事情所以没有继续更新,今天我们接着说.上个帖子中我们看到已经把Excel数据生成了.bin的文件,不过其 ...
- C# Unity游戏开发——Excel中的数据是如何到游戏中的 (四)2018.4.3更新
本帖是延续的:C# Unity游戏开发--Excel中的数据是如何到游戏中的 (三) 最近项目不算太忙,终于有时间更新博客了.关于数据处理这个主题前面的(一)(二)(三)基本上算是一个完整的静态数据处 ...
- vlookup函数基本使用--如何将两个Excel表中的数据匹配;excel表中vlookup函数使用方法将一表引到另一表
vlookup函数基本使用--如何将两个Excel表中的数据匹配:excel表中vlookup函数使用方法将一表引到另一表 一.将几个学生的籍贯匹配出来‘ 二.使用查找与引用函数 vlookup 三. ...
- excel中的数据粘贴不全到plsql中,excel 粘贴后空白,Excel复制粘贴内容不全
http://zhidao.baidu.com/link?url=pHZQvfWJzI-lQjl4uP86q4GLcpYHu4o-fdjiYegJS0Cy5HEq5oz0YrUye3iHjmv5CJ3 ...
- hbase使用MapReduce操作4(实现将 HDFS 中的数据写入到 HBase 表中)
实现将 HDFS 中的数据写入到 HBase 表中 Runner类 package com.yjsj.hbase_mr2; import com.yjsj.hbase_mr2.ReadFruitFro ...
- sql之将一个表中的数据注入另一个表中
sql之将一个表中的数据注入另一个表中 需求:现有两张表t1,t2,现需要将t2的数据通过XZQHBM相同对应放入t1表中 t1: t2: 思路:left join 语句: select * from ...
- 把数据库里面的stu表中的数据,导出到excel中
# 2.写代码实现,把我的数据库里面的stu表中的数据,导出到excel中 #编号 名字 性别 # 需求分析:# 1.连接好数据库,写好SQL,查到数据 [[1,'name1','男'],[1,'na ...
随机推荐
- JS的函数节流(throttle)
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
- 【读书笔记】iOS-库
一,OS X和iOS自带一些标准的C程序库和操作系统相关的特殊性.在MAC和iOS的世界里,静态库采用.a扩展名(静态对象代码库存档),动态加载库采用.dylib扩展名.如果开发人员来自于Linux世 ...
- Android Studio NDK JNI动态注册本地方法
概述 可能大家觉得javah生成的函数名又臭又长,不太好看.这里可以提供另外一种方法来动态注册c++函数,让其根Java中的native方法关联起来. 实现 这里通过JNIEnv的Resisterna ...
- 爱奇艺、伤酷、乐视 vip 解析视频网站
爱奇艺.伤酷.乐视 vip 解析视频网站 :http://www.nongshenghuo.com:805
- 企业建立成功 DevOps 模式所需应对的5个挑战
[编者按]本文作者为 Kevin Goldberg,主要介绍要想成功部署 DevOps 模式,企业所需应对的5大挑战与问题.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 要给 DevOps ...
- OneAPM 获得“2018中国 IT 服务创新奖”,彰显技术创新实力
6月30日,主题为“智能服务 数字中国”的中国 IT 服务创新大会在京召开.作为第22届中国国际软件博览会的重头戏,本次大会由工业和信息化部.北京市人民政府共同主办,中国电子工业标准化技术协会信息技术 ...
- SQL强化练习(面试与学习必备)
一.经典选课题A 1.1.请同时使用GUI手动与SQL指令的形式创建数据库.表并添加数据. 题目:设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教 ...
- (转)Debian 安装与卸载包命令
1.APT主要命令apt-cache search ------package 搜索包sudo apt-get install ------package 安装包sudo apt-get remov ...
- mssql sqlserver for xml EXPLICIT 用法详解说明
摘要:下文通过举例的方式,详细说明"for xml EXPLICIT"关键字的用法,如下所示:实验环境:sql server 2008 R2 EXPLICIT的功能:将数据表采用特 ...
- Windows Server 2016-WinSer 2016标准版与数据中心版的区别
今天在整理文章的时候看到有读者问到他现在的测试环境是用的Windows Server 2016标准版,和我现阶段系列文章的环境是否有区别. 其实针对Windows Server 2016 Active ...