快捷導(dǎo)航

java實現(xiàn)后臺數(shù)據(jù)顯示在前端

更新時間：2020年02月14日 12:17:06 作者：沿途不枉少年

這篇文章主要為大家詳細(xì)介紹了java實現(xiàn)后臺數(shù)據(jù)顯示在前端，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本篇使用servlet +.ajax( )的技術(shù)，實現(xiàn)簡單的前后臺的交互問題。

首先來了解一下AJAX
AJAX是jquery的一個方法，一種在網(wǎng)頁上調(diào)用后臺接口的方式。
示例：$.ajax( { 參數(shù) } ) ;
$.ajax()等同于jQuery.ajax( )
參數(shù)里是一個JS對象, 其中的屬性：
type: ' GET' /‘POST'
url: 接口地址
success:服務(wù)器應(yīng)答時，調(diào)用此function處理(回調(diào)方法)

另外說一下Servlet
Servlet，服務(wù)小程序，為客戶端提供自定義服務(wù)的機制。
瀏覽器(客戶端) —請求—》Tomcat(服務(wù)器)
Tomcat(服務(wù)器) —應(yīng)答—》瀏覽器(客戶端)

//創(chuàng)建一個學(xué)生pojo 類

/**
 * 這是一個關(guān)于學(xué)生的POJO類
 * 暫時不引入數(shù)據(jù)庫
 * 只是一個假的數(shù)據(jù)庫
 */

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;
 }

創(chuàng)建一個假的學(xué)生類型數(shù)據(jù)庫并存入數(shù)據(jù)

public class Db
{
 //創(chuàng)建一個本類的全局對象
 public static Db i = new Db();
 
 //使用鏈表寫入數(shù)據(jù)
 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;
 }
 
 //按照學(xué)號查詢
 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;
 }
}

創(chuàng)建一個servlet

將數(shù)據(jù)返回

/**
*只需要更改doGet方法
*/
@WebServlet("/QueryAll")
public class QueryAll extends HttpServlet {

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
 ArrayList<Student> rows = Db.i.all();
 
 //轉(zhuǎn)換成JSON格式
 JSONArray result = new JSONArray(rows);
 
 //返回數(shù)據(jù)
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/plain");
 Writer writer = response.getWriter();
 writer.write(result.toString(2));
 writer.close();
 }
 }

下面是前端的代碼將html+css+js結(jié)合到了一起

<!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">學(xué)號</th>
  <th class="name">姓名</th>
  <th class="adress">住址</th>
 </tr>
 </thead>
 <tbody>
 
 </tbody>
 </table>
 <div class="empty">
 現(xiàn)在沒有數(shù)據(jù)
 </div>
 </div>
 </div>
 </body>
 <script>
 //查詢
 function query()
 {
 $.ajax({
 type:"GET";
 url:"QueryAll";
 dataType:"json";
 success:function(resp)
 {
  show(resp);
 } 
 });
 }
 
 //格式化數(shù)據(jù)并顯示
 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); 
 } 
 //沒有數(shù)據(jù)把空的內(nèi)容顯示出來
 if(result.length>0)
  $(".empty").hide();
  else
  $(".empty").show();
 }
 
 </script>
</html>

最后實現(xiàn)的內(nèi)容