java实现后台数据显示在前端
本篇使用servlet +.ajax( )的技术，实现简单的前后台的交互问题。
首先来了解一下AJAX
AJAX是jquery的一个方法，一种在网页上调用后台接口的方式。
示例：$.ajax( { 参数 } ) ;
$.ajax()等同于jQuery.ajax( )
参数里是一个JS对象, 其中的属性：
type: ' GET' /‘POST'
url: 接口地址
success:服务器应答时，调用此function处理(回调方法)
另外说一下Servlet
Servlet，服务小程序，为客户端提供自定义服务的机制。
浏览器(客户端) —请求—》Tomcat(服务器)
Tomcat(服务器) —应答—》浏览器(客户端)
//创建一个学生pojo 类
/**
* 这是一个关于学生的POJO类
* 暂时不引入数据库
* 只是一个假的数据库
*/
public class Student
{
public int id;
public String name;
public String adress;
public Student()
{
}
public Student(int id,String name,String adress)
{
this.id = id;
this.name = name;
this.adress = adress;
}
public int getId()
{
return id;
}
public void setId(int id)
{
this.id = id;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getAdress()
{
return adress;
}
public void setAdress(String adress)
{
this.adress = adress;
}
创建一个假的学生类型数据库并存入数据
public class Db
{
//创建一个本类的全局对象
public static Db i = new Db();
//使用链表写入数据
private ArrayList<Student> stu = new ArrayList<>();
private Db()
{
stu.add(new Student(20180001,"老王","北京"));
stu.add(new Student(20180002,"老甄","邢台"));
stu.add(new Student(20180003,"老高","邢台"));
stu.add(new Student(20180004,"老孟","邯郸"));
stu.add(new Student(20180005,"老裴","太原"));
stu.add(new Student(20180006,"老李","东北"));
stu.add(new Student(20180007,"老张","武汉"));
stu.add(new Student(20180008,"老苗","重庆"));
stu.add(new Student(20180009,"老郭","北京"));
}
//获取全部信息
public ArrayList<Student> all()
{
return stu;
}
//按照学号查询
public ArrayList<Student> byId(int from,int to)
{
ArrayList<Student> qStu = new ArrayList<>();
for(int i=0;i<stu.size();i++)
{
Student s = stu.get(i);
if(s.id<=from &&s.id<=to)
{
qStu.add(s);
}
}
return qStu;
}
}
创建一个servlet
将数据返回
/**
*只需要更改doGet方法
*/
@WebServlet("/QueryAll")
public class QueryAll extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Student> rows = Db.i.all();
//转换成JSON格式
JSONArray result = new JSONArray(rows);
//返回数据
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain");
Writer writer = response.getWriter();
writer.write(result.toString(2));
writer.close();
}
}
下面是前端的代码 将html+css+js结合到了一起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body{
background-color: #EEEEEE;
margin: 0px;
padding: 0px;
}
table{
border-collapse: collapse;
table-layout: fixed;
}
table,td,th{
border: 1px solid #888;
text-align: center;
}
.main{
width: 600px;
height: 300px;
background-color: #FFFFFF;
padding: 10px;
margin: 10px auto;
position: relative;
}
.main .content{
width: 300px;
}
.empty{
text-align: center;
padding: 4px;
display: block;
border: 0px solid #888;
border-width: 0px 1px 1px 1px;
}
.main .id{ width: 100px;}
.main .name{width: 100px;}
.main .adress{width: 100px;}
</style>
</head>
<body>
<div class="main">
<button onclick="query()">查询</button>
<div class="content">
<table>
<thead>
<tr>
<th class="id">学号</th>
<th class="name">姓名</th>
<th class="adress">住址</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="empty">
现在没有数据
</div>
</div>
</div>
</body>
<script>
//查询
function query()
{
$.ajax({
type:"GET";
url:"QueryAll";
dataType:"json";
success:function(resp)
{
show(resp);
}
});
}
//格式化数据并显示
function show(result)
{
var cont = $(".main tbody");
cont.html(""); //清空
for(var row of result)
{
var str = "<tr>"
+"<td>"+row.id+"</td>"
+"<td>"+row.name+"</td>"
+"<td>"+row.adress+"</td>"
+"</tr>";
cont.append(str);
}
//没有数据把空的内容显示出来
if(result.length>0)
$(".empty").hide();
else
$(".empty").show();
}
</script>
</html>
最后实现的内容
当点击这个查询的时候 ,将学生信息打印出来
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
java中对list分页并显示数据到页面实例代码
有时候需要根据条件查询得出的数据较多,需要分页显示到页面上.这时点击下一页就不方便每次带查询条件在数据库中分页.可以在list中进行分页. page的model类: public class Page { private Integer currentPage;//当前页 private int pageSize;//每页显示记录条数 private int totalPage;//总页数 private List<?> dataList;//每页显示的数据 private int star;
-
Java Servlet生成JSON格式数据并用jQuery显示的方法
本文实例讲述了Java Servlet生成JSON格式数据并用jQuery显示的方法.分享给大家供大家参考,具体如下: 1.Servlet通过json-lib生成JSON格式的数据 import java.io.IOException; import java.io.PrintWriter; import java.util.*; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet;
-
java实现后台数据显示在前端
本篇使用servlet +.ajax( )的技术,实现简单的前后台的交互问题. 首先来了解一下AJAX AJAX是jquery的一个方法,一种在网页上调用后台接口的方式. 示例:$.ajax( { 参数 } ) ; $.ajax()等同于jQuery.ajax( ) 参数里是一个JS对象, 其中的属性: type: ' GET' /'POST' url: 接口地址 success:服务器应答时,调用此function处理(回调方法) 另外说一下Servlet Servlet,服务小程序,为客户端
-
Java的后台文件夹下文件的遍历完整代码
一.在java中遍历一个文件夹里边的所有文件,可以有两种方式: 1.递归遍历,通常也是开发者第一时间能想到的方法,递归遍历的优点是:实现起来相对简单,代码量相对较少,执行效率较高,缺点是:比较吃内存,对硬件要求较高 // 递归遍历 private void getDirectory(File file) { File flist[] = file.listFiles(); if (flist == null || flist.length == 0) { return 0; } for (Fil
-
Java中后台线程实例解析
本文研究的主要是Java中后台线程的相关问题,具体介绍如下. 以前从来没有听说过,java中有后台线程这种东西.一般来说,JVM(JAVA虚拟机)中一般会包括俩种线程,分别是用户线程和后台线程.所谓后台线程(daemon)线程指的是:在程序运行的时候在后台提供的一种通用的服务的线程,并且这种线程并不属于程序中不可或缺的部分.因此,当所有的非后台线程结束的时候,也就是用户线程都结束的时候,程序也就终止了.同时,会杀死进程中的所有的后台线程.反过来说,只要有任何非后台线程还在运行,程序就不会结束.不
-
jquery 通过ajax请求获取后台数据显示在表格上的方法
1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" > <script type="text/javascript"
-
Java实现后台发送及接收json数据的方法示例
本文实例讲述了Java实现后台发送及接收json数据的方法.分享给大家供大家参考,具体如下: 本篇博客试用于编写java后台接口以及两个项目之间的接口对接功能: 具体的内容如下: 1.java后台给指定接口发送json数据 package com.utils; import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.net.Htt
-
windows下java -jar 后台运行以及杀死后台进程的操作
在你的jar文件当前目录中建立一个bat文件: 内容是:注意文件名要对应 @echo off START "commandServer" javaw -jar command-0.0.1-SNAPSHOT.jar 之后双击bat文件就能后台启动jar包啦 杀死后台进程 首先执行命令 (你要知道你运行的jar文件的端口号) netstat -aon | findstr "9998" 可以看到PID为6452 然后在执行: tasklist|findstr "
-
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
-
java实现后台处理base64图片还原为文件
目录 后台处理base64图片还原为文件 java Base64解析 关于Base64的解析方式如下 使用如下代码解析 后台处理base64图片还原为文件 /** * 将base64图片解析成文件存放本地 * @param imgStr * @return 本地临时文件的地址 */ private static String generateImage(String imgStr){ if(Strings.isNullOrEmpty(imgStr)){ return null; } BASE64
-
java实现后台返回base64图形编码
目录 java后台返回base64图形编码 工具类 使用方法 后端返回base64验证码,解析不出来 java后台返回base64图形编码 工具类 package com.liginfo.app.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt
-
编写漂亮的代码 - 将后台程序与前端程序分开
在编写PHP程序时,有些代码是用来处理一些事务,例如操作数据库.进行数学运算等,而另外的一些代码则只是事务处理的结果显示出来,例如一些使用echo语句将结果以HTML的格式显示在Web浏览器上的PHP代码以及那些直接嵌入PHP程序的HTML代码.首先我们应该清晰地区分这两种代码,把前者称为后台程序,把后者称为前端程序. 因为PHP是一种嵌入式编程语言,也就是说,所有的PHP代码都可以嵌入到HTML代码之中,这为程序的编写带来了许多便利之处.但是,"物极必反",如果在一段较长的程序中将P