您好,登錄后才能下訂單哦!
本篇使用servlet +.ajax( )的技術(shù),實現(xiàn)簡單的前后臺的交互問題。
首先來了解一下AJAX
AJAX是jquery的一個方法,一種在網(wǎng)頁上調(diào)用后臺接口的方式。
示例:$.ajax( { 參數(shù) } ) ;
$.ajax()等同于jQuery.ajax( )
參數(shù)里是一個JS對象, 其中的屬性:
type: ' GET' /‘POST'
url: 接口地址
success:服務器應答時,調(diào)用此function處理(回調(diào)方法)
另外說一下Servlet
Servlet,服務小程序,為客戶端提供自定義服務的機制。
瀏覽器(客戶端) —請求—》Tomcat(服務器)
Tomcat(服務器) —應答—》瀏覽器(客戶端)
//創(chuàng)建一個學生pojo 類 /** * 這是一個關(guān)于學生的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)建一個假的學生類型數(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; } //按照學號查詢 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">學號</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)容
當點擊這個查詢的時候 ,將學生信息打印出來
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。