溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇使用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>
最后實現的內容
當點擊這個查詢的時候 ,將學生信息打印出來
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
