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

发布时间：2020-09-07 15:16:09

来源：脚本之家

阅读：98

作者：沿途不枉少年

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

首先来了解一下AJAXAJAX是jquery的一个方法，一种在网页上调用后台接口的方式。

示例：$.ajax( { 参数 } ) ;

$.ajax()等同于jQuery.ajax( )

参数里是一个JS对象, 其中的属性：

type: ' GET' /‘POST'

url: 接口地址

success:服务器应答时，调用此function处理(回调方法)

另外说一下ServletServlet，服务小程序，为客户端提供自定义服务的机制。

浏览器(客户端) —请求—》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 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

{

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

//查询

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 = "

"

+"

"+row.id+""

+"

"+row.name+""

+"

"+row.adress+""

+"

";

cont.append(str);

}

//没有数据把空的内容显示出来

if(result.length>0)

$(".empty").hide();

else

$(".empty").show();

}

最后实现的内容

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

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