本篇使用servlet +.ajax( )的技术，实现简单的前后台的交互问题。
创新互联-专业网站定制、快速模板网站建设、高性价比寒亭网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式寒亭网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖寒亭地区。费用合理售后完善，十多年实体公司更值得信赖。
首先来了解一下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创建一个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结合到了一起
最后实现的内容
当点击这个查询的时候 ,将学生信息打印出来
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
本文题目：java实现后台数据显示在前端
转载来于：
http://cdkjz.cn/article/jdgcjo.html
