jfinal+hbase+eclipse開發web專案詳細步驟02---jfinal工程中加入jquery外掛
阿新 • • 發佈：2018-12-06
本小節是在01工程步驟至上進行改進，主要改進內容有：
1、加入jquery外掛。
2、利用jquery外掛的ajax來做頁面與後臺的資料互動。
3、利用jquery來動態處理頁面資料與頁面顯示。
注意，在開發之前，我們先要準備好01工程和jquery外掛，jquery外掛下載，我用的是jquery-3.3.1.min
步驟1：加入jquery外掛
在WebContent資料夾下新建資料夾js，並且將下載好的jquery-3.3.1.min.js複製到資料夾中
步驟2：雙擊開啟index.html檔案
步驟3：引入query外掛
在head中間加入
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
步驟4：編寫ajax做資料互動
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
data:{"data1":"11","data2":"22"},
url:"/hello/indexData",
type:"post",
success: 
步驟5：編寫table表格
<body align="center">
這是學生資訊頁面<br>
<hr>
<table border="1" align="center">
<thead>
<tr>
<td>學號</td>
<td>姓名</td>
<td>班級</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
如圖下：
步驟6：新建Student類，並編寫類資訊內容
在demo包中，右鍵新建類
編寫Student.java內容
package com.demo;
public class Student {
private String no;//學號
private String name;//姓名
private String cls;//班級
public String getNo() {
return no;
}
public void setNo(String no) {
this.no = no;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
}
第8步：新增在HelloController類中獲取資料indexData方法。
public void indexData() {
ArrayList<Student> studnets=new ArrayList<>();
Student s1=new Student();
s1.setNo("01");
s1.setCls("16計本1班");
s1.setName("小米");
Student s2=new Student();
s2.setNo("02");
s2.setCls("16計本1班");
s2.setName("小花");
Student s3=new Student();
s3.setNo("01");
s3.setCls("16計本2班");
s3.setName("旺旺");
studnets.add(s1);
studnets.add(s2);
studnets.add(s3);
setAttr("infos", studnets);
renderJson();
}
步驟9：啟動服務
開啟Start類,右鍵點選執行
步驟10：執行檢視
開啟瀏覽器，輸入：http://localhost:8082/hello
如果顯示一下介面，說明成功！！
