java實現後臺資料顯示在前端

阿新 • • 發佈：2020-02-15

本篇使用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<Student> 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<Student> all()
 {
 return stu;
 }
 
 //按照學號查詢
 public ArrayList<Student> byId(int from,int to)
 {
 ArrayList<Student> qStu = new ArrayList<>();
 for(int i=0;i<stu.size();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<Student> 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結合到了一起

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 <style>
  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;}
 </style>
 </head>
 
 <body>
 <div class="main">
 <button onclick="query()">查詢</button>
  <div class="content">
 <table>
  <thead>
  <tr>
   <th class="id">學號</th>
   <th class="name">姓名</th>
   <th class="adress">住址</th>
  </tr>
  </thead>
  <tbody>
  
  </tbody>
 </table>
 <div class="empty">
  現在沒有資料
 </div>
 </div>
 </div>
 </body>
 <script>
 //查詢
 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 = "<tr>"
    +"<td>"+row.id+"</td>"
   +"<td>"+row.name+"</td>"
   +"<td>"+row.adress+"</td>"
   +"</tr>";
  cont.append(str); 
  } 
  //沒有資料把空的內容顯示出來
  if(result.length>0)
    $(".empty").hide();
   else
    $(".empty").show();
 }
 
 </script>
</html>

最後實現的內容

java實現後臺資料顯示在前端