1. 程式人生 > >jfinal+hbase+eclipse開發web專案詳細步驟02---jfinal工程中加入jquery外掛

jfinal+hbase+eclipse開發web專案詳細步驟02---jfinal工程中加入jquery外掛

本小節是在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:
function(data){ var list=data.infos; var tr=""; $.each(list, function(i, item){ tr +="<tr><td>"+item.no+"</td>"+"<td>"+item.name+"</td>"+"<td>"+item.cls+"</td>"; }); $("table").append(tr); } }); }); </script>

在這裡插入圖片描述

步驟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
如果顯示一下介面,說明成功!!
在這裡插入圖片描述