java实现后台数据显示在前端

本篇使用servlet +.ajax( )的技术，实现简单的前后台的交互问题。

首先来了解一下AJAX
AJAX是jquery的一个方法，一种在网页上调用后台接口的方式。
示例：$.ajax( { 参数 } ) ;
$.ajax()等同于jQuery.ajax( )
参数里是一个JS对象, 其中的属性：
type: ' GET' /‘POST'
url: 接口地址
success:服务器应答时，调用此function处理(回调方法)

另外说一下Servlet
Servlet，服务小程序，为客户端提供自定义服务的机制。
浏览器(客户端) —请求—》Tomcat(服务器)
Tomcat(服务器) —应答—》浏览器(客户端)

//创建一个学生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 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 all()
 {
 return stu;
 }
 
 //按照学号查询
 public ArrayList byId(int from,int to)
 {
 ArrayList qStu = new ArrayList<>();
 for(int i=0;i

创建一个servlet
将数据返回


@WebServlet("/QueryAll")
public class QueryAll extends HttpServlet {

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
 ArrayList 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结合到了一起



 
 
 
 
 
 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;}
 
 
 
 
 
 查询
 
 

 

 

  
学号
  
姓名
  
住址
 
 
 

 
 
 
 
 现在没有数据
 
 
 
 
 


最后实现的内容

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。