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

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 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结合到了一起

{

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结合到了一起

查询

现在没有数据

最后实现的内容

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。