这篇文章主要为大家详细介绍了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 创建一个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结合到了一起
学号 姓名 住址 现在没有数据
最后实现的内容
当点击这个查询的时候 ,将学生信息打印出来
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是java实现后台数据显示在前端的详细内容，更多请关注0133技术站其它相关文章！
