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>

最后实现的内容

当点击这个查询的时候 ,将学生信息打印出来

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-02-13

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中对list分页并显示数据到页面实例代码

有时候需要根据条件查询得出的数据较多,需要分页显示到页面上.这时点击下一页就不方便每次带查询条件在数据库中分页.可以在list中进行分页. page的model类: public class Page { private Integer currentPage;//当前页 private int pageSize;//每页显示记录条数 private int totalPage;//总页数 private List<?> dataList;//每页显示的数据 private int star;

Django中使用jquery的ajax进行数据交互的实例代码

jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

在java中判断两个浮点型(float)数据是否相等的案例

示例代码: public static void main(String[] args) { float a = 10.222222225f; float b = 10.222222229f; System.out.println("使用==判断是否相等:" + (a == b));// 超出精度范围 System.out.println("使用Math.abs()判断是否相等:" + (Math.abs(a - b) >= 0)); System.out.p

JAVA 中实现整句汉字拆分、转换为ASCII实例详解

JAVA 中实现整句汉字拆分.转换为ASCII实例详解 大家都知道,一个汉字等于两个byte的大小.二进制数据通过网络传输时,如果两个byte都超过128则会合并成一个Unicode(汉字)字符,本文的代码主要实现的功能是:把这些汉字拆分为byte,然后重新变为ASCII类型的字符串. public static String ChineseToASCII(byte[] rec) { //从字节读取内容 ByteArrayInputStream bais = new ByteArrayInput

java向文件中追加内容与读写文件内容源码实例代码

java向文件中追加内容与读写文件内容源码实例代码 向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以将读写指针移到文件尾,参数Pos表示从文件开头以字节为单位测量的偏移位置,在该位置文件指针. public void write(int pos)将数据写到读写指针后面,完成文件的追加.参数pos表示要写入的Byte 通过FileWrite打开文件

Java 中的vector和list的区别和使用实例详解

要了解vector,list,deque.我们先来了解一下STL. STL是Standard Template Library的简称,中文名是标准模板库.从根本上说,STL是一些容器和算法的集合.STL可分为容器(containers).迭代器(iterators).空间配置器(allocator).配接器(adapters).算法(algorithms).仿函数(functors)六个部分.指针被封装成迭代器,这里vector,list就是所谓的容器. 我们常常在实现链表,栈,队列或者数组时,

java 中模拟UDP传输的发送端和接收端实例详解

java 中模拟UDP传输的发送端和接收端实例详解 一.创建UDP传输的发送端 1.建立UDP的Socket服务: 2.将要发送的数据封装到数据包中: 3.通过UDP的Socket服务将数据包发送出去: 4.关闭Socket服务. import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress; public class

Java 中利用泛型和反射机制抽象DAO的实例

Java 中利用泛型和反射机制抽象DAO的实例 一般的DAO都有CRUD操作,在每个实体DAO接口中重复定义这些方法,不如提供一个通用的DAO接口,具体的实体DAO可以扩展这个通用DAO以提供特殊的操作,从而将DAO抽象到另一层次,令代码质量有很好的提升 1.通用接口 import java.io.Serializable; import java.util.List; public interface BaseDao<T> { T get(Serializable id); List<

详解 Java中日期数据类型的处理之格式转换的实例

详解 Java中日期数据类型的处理之格式转换的实例 概要: 日期以及时间格式处理,在Java中时间格式一般会涉及到的数据类型包括Calendar类和Date类. Date类: 1.Date类型转String类型(以时间格式1970-01-01 01:01:01为例) //yyyy-MM-dd HH:mm:ss表示24时间进制 SimpleDateFormat sDateFormat=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); String

java 文件大数据Excel下载实例代码

java 文件大数据Excel下载实例代码 excel可以用xml表示.故可以以此来实现边写边下载文件 package com.tydic.qop.controller; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.I