//先下载jquery js文件 放入项目中

jsp文件内容

<%@ page language="java" pageEncoding="UTF-8"%>

 <!DOCTYPE HTML>

 <html>

   <head>

    <title>用户列表</title>

  <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>

    <style>

        table {

            width: 600px;

            padding: 0 ;

            margin: 100 auto;

            border-collapse: collapse;

        }

        td,th {

            border: 1px solid #ddd;

            padding: 6px 6px 6px 12px;

            color: #4f6b72;

            text-align: center;

        }

        th {

            background: #d3d3d3;  

        }

    </style>

</head>

<body onload="appendTable(jsonArray);">

    <div id="div1">

       <table id="table">

       </table>

    </div>

    <script type="text/javascript">

     $(document).ready(function(){

   });

          var jsonArray = [{"主键":"","租户ID":"小苹果","账号":"现代神曲，大妈的最爱","密码":"小00","昵称":"小00","真名":"小00","头像":"小00","邮箱":"小00","手机":"小00","生日":"小00","性别":"小00","角色id":"小00","部门id":"小00",}];

          var headArray = [];

          function parseHead(oneRow) {

                        for ( var i in oneRow) {

                                headArray[headArray.length] = i;

                         }

            }

            function appendTable() {

            	 $.ajax({

          			type:"get",

          			url:"${pageContext.request.contextPath }/getUserInfo.do",

          			//data:{"id":id},

          			success:function(data) {

          				var datas=Array.from(data.data);

          				//alert(datas);

          				 parseHead(data.data[0]);

                         var div = document.getElementById("div1");

                         //var table = document.createElement("table");

                         var table = document.getElementById("table");

                         var thead = document.createElement("tr");

                         for ( var count = 0; count < headArray.length; count++) {

                                   var td = document.createElement("th");

                                   td.innerHTML = headArray[count];

                                   thead.appendChild(td);

                          }

                          table.appendChild(thead);

                         for ( var tableRowNo = 0; tableRowNo < data.data.length; tableRowNo++) {

                                   var tr = document.createElement("tr");

                                   for ( var headCount = 0; headCount < headArray.length; headCount++) {

                                           var cell = document.createElement("td");

                                           cell.innerHTML = data.data[tableRowNo][headArray[headCount]];

                                           tr.appendChild(cell);

                                   }

                                   table.appendChild(tr);

                        }

                         div.appendChild(table);  

          			}

          		});

        }                         

</script>

</body>  

 </html>

　　

将后端返回的数据在jsp中拼接成table列表的更多相关文章

  1. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据， 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  2. 当后端返回的数据是以属性做开头，怎么用length取值

    在我们前端开发中,一般需要的数据是分条的如 [{},{},{},{}] ,这样的数据方便我们用length取值,尤其是在表格中.在控制台看的时候能轻易的看出1 2 3 4条,但有时候后台返回的数据不是 ...

  3. 服务器返回的数据将Unicode码转成汉字

    当我们请求接口的时候,服务器会返回一些数据,当我们打印的时候就会发现,打印出来的是unicode码,不是汉字. 这时候需要我们自己手动处理一下,让打印的时候输出汉字的格式. 方法如下: 新增一个分类, ...

  4. easyui中加载table列表数据 第一次有数据第二次没有数据问题

    $('#allUsingProductTable').datagrid({  加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解 ...

  5. elementui中的el-table中拼接两个列表字段

    我们知道,在ElementUI中我们是使用下面的语法来展示列表字段的: <el-table :data="yanggbs" stripe style="width: ...

  6. java中根据后端返回的数据加载table列表

    <%//引入 js @ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML& ...

  7. 简单理解SNAT回流中的概念：路由器怎么知道外网返回的数据是局域网中哪台主机的

    内网到外网用的是NAT技术(地址封装)外网到内网用的是端口映射(PNAT)计算机的端口又65535(0-65534),你说的那些有名气的端口大多都是0-1023之间的你说的这个问题很简单,但首先你要懂 ...

  8. 后端返回图片的url,将其转成base64,再次进行上传

      //将图片变成base64再上传(主要是转化来自客户端的图片)  getUrlBase64=(url, ext)=> {     var canvas = document.createEl ...

  9. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

随机推荐

  1. mq TransientStorePool

    总得来说 有些像页高速缓存那样,为了避免页面被换出到交换区,mq申请了一块内存,并且用指定这些页面不能被操作系统换出,然后将这些内存分配给业务使用:

  2. 老猿学5G随笔：RAN、RAT以及anchor移动性锚点的概念

    最近在学习UPF的功能时,有这样一句话"用户平面功能(UPF)包括以下功能. 用于RAT内/ RAT间移动性的锚点(适用时)",这句话不理解,后来看到了<关于移动锚点的理解! ...

  3. CSDN-markdown编辑器使用方法

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...

  4. 第二十九章、containers容器类部件QFrame框架部件详解

    一.概述 容器部件就是可以在部件内放置其他部件的部件,在Qt Designer中可以使用的容器部件有如下: 容器中的Frame为一个矩形的框架对象,对应类QFrame,QFrame类是PyQt中带框架 ...

  5. 第11.10节 Python正则表达式的非贪婪模式的重复匹配：'*?', '+?'，和 '??'

    在<第11.9节 Pytho正则表达式的贪婪模式和非贪婪模式>老猿简单介绍了贪婪模式和非贪婪模式,并说明'', '+',和 '?' 修饰符都是 贪婪的:它们在字符串进行尽可能多的匹配.有时 ...

  6. Robot framework 环境搭建+图标处理

    场景:随着现在项目各种赶工,很多时候界面上的功能还没有实现,这时就可以先对接口进行验证,提早发现一些和预期不一致的错误. Robot framework需要的几个知识点: 测试库:RF是大树,测试库就 ...

  7. Paddle源码之内存管理技术

    前言 在深度学习模型训练中,每次迭代过程中都涉及到Tensor的创建和销毁,伴随着的是内存的频繁 malloc和free操作,可能对模型训练带来不必要的 overhead. 在主流的深度学习框架中,会 ...

  8. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  9. 从输入 URL 到页面展示，这中间发生了什么？

    当面试官问到,请你说说看"从输入 URL 到页面展示,这中间发生了什么?" 以前的我是这样回答的: 用户输入URL后,向服务器端发起请求.如果顺利,得到网络响应之后,浏览器对资源进 ...

  10. 状压DP复习笔记

    前言 复习笔记第4篇.CSP RP++. 引用部分为总结性内容. 0--P1433 吃奶酪 题目链接 luogu 题意 房间里放着 \(n\) 块奶酪,要把它们都吃掉,问至少要跑多少距离?一开始在 \ ...