java实现后台数据显示在前端
本篇使用servlet+.ajax()的技术，实现简单的前后台的交互问题。
首先来了解一下AJAX
AJAX是jquery的一个方法，一种在网页上调用后台接口的方式。
示例：$.ajax({参数});
$.ajax()等同于jQuery.ajax()
参数里是一个JS对象,其中的属性：
type:'GET'/‘POST'
url:接口地址
success:服务器应答时，调用此function处理(回调方法)
另外说一下Servlet
Servlet，服务小程序，为客户端提供自定义服务的机制。
浏览器(客户端)—请求—》Tomcat(服务器)
Tomcat(服务器)—应答—》浏览器(客户端)
//创建一个学生pojo类
/**
*这是一个关于学生的POJO类
*暂时不引入数据库
*只是一个假的数据库
*/
publicclassStudent
{
publicintid;
publicStringname;
publicStringadress;
publicStudent()
{
}
publicStudent(intid,Stringname,Stringadress)
{
this.id=id;
this.name=name;
this.adress=adress;
}
publicintgetId()
{
returnid;
}
publicvoidsetId(intid)
{
this.id=id;
}
publicStringgetName()
{
returnname;
}
publicvoidsetName(Stringname)
{
this.name=name;
}
publicStringgetAdress()
{
returnadress;
}
publicvoidsetAdress(Stringadress)
{
this.adress=adress;
}
创建一个假的学生类型数据库并存入数据
publicclassDb
{
//创建一个本类的全局对象
publicstaticDbi=newDb();
//使用链表写入数据
privateArrayListstu=newArrayList<>();
privateDb()
{
stu.add(newStudent(20180001,"老王","北京"));
stu.add(newStudent(20180002,"老甄","邢台"));
stu.add(newStudent(20180003,"老高","邢台"));
stu.add(newStudent(20180004,"老孟","邯郸"));
stu.add(newStudent(20180005,"老裴","太原"));
stu.add(newStudent(20180006,"老李","东北"));
stu.add(newStudent(20180007,"老张","武汉"));
stu.add(newStudent(20180008,"老苗","重庆"));
stu.add(newStudent(20180009,"老郭","北京"));
}
//获取全部信息
publicArrayListall()
{
returnstu;
}
//按照学号查询
publicArrayListbyId(intfrom,intto)
{
ArrayListqStu=newArrayList<>();
for(inti=0;i
创建一个servlet
将数据返回
/**
*只需要更改doGet方法
*/
@WebServlet("/QueryAll")
publicclassQueryAllextendsHttpServlet{
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
ArrayListrows=Db.i.all();
//转换成JSON格式
JSONArrayresult=newJSONArray(rows);
//返回数据
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain");
Writerwriter=response.getWriter();
writer.write(result.toString(2));
writer.close();
}
}
下面是前端的代码将html+css+js结合到了一起
查询
学号
姓名
住址
现在没有数据