# Ajax異步加載數據
###### tags: `Ajax介紹`
### 先創建一個pojo的對象
底下的@Data、@AllArgsConstructor、@NoArgsConstructor
是藉由在pom.xml添加的新註解
可以節省重複編寫對象的方法
```xml=
<dependencies>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.24</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>RELEASE</version>
<scope>compile</scope>
</dependency>
</dependencies>
```
#### User
@NoArgsConstructor : 生成一個沒有參數的constructor(空參)
@AllArgsConstructor : 生成一個包含所有參數的 constructor
```java=
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
private String sex;
}
```
### AjaxController
在AjaxController添加使用User添加數據的頁面
```java=
@RequestMapping("/a2")
public List<User> a2(){
ArrayList<User> userList = new ArrayList<>();
//添加數據
userList.add(new User("狂神說java",1,"男"));
userList.add(new User("狂神說前端",1,"女"));
userList.add(new User("狂神說運維",1,"男"));
return userList;
}
```
### 執行效果
頁面出現在a2中添加的數據
## 嘗試在網頁中建立表格呈現數據
### 1.先測試是否可以執行 click 後的命令
#### test2.jsp
```htmlembedded=
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--用路徑來引入安裝jquery，得以使用jquery內的方法--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.4.js"></script>
<%--針對id為btn的點擊動作作為觸發條件--%>
<script>
$(function (){
$("#btn").click(function (){
console.log("111");
})
})
</script>
</head>
<body>
<input type="button" value="加載數據" id="btn">
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tbody>
<%--數據：後台傳遞--%>
</tbody>
</table>
</body>
</html>
```
#### 呈現畫面
測試成功
### 2.來加載後台數據
```htmlembedded=
<script>
$(function (){
$("#btn").click(function (){
//簡寫的方式
//$.post(url,param[可以省略],success)
//這裡就省略掉了param，function (data) 為 success
$.post("${pageContext.request.contextPath}/a2",function (data){
console.log(data);
})
})
})
</script>
```
效果：成功
### 將數據加載到網頁中
#### test2.jsp
```htmlembedded=
<script>
$(function (){
$("#btn").click(function (){
//簡寫的方式
//$.post(url,param[可以省略],success)
//這裡就省略掉了param，function (data) 為 success
//function (data)中的data為形參，可以換成其他來使用
$.post("${pageContext.request.contextPath}/a2",function (data){
console.log(data);
var html="<>";
//這邊透過遍歷的方式，將每段數據拼接起來呈現
/*
* <tr>
<td>
data[i].name
</td>
</tr>
此段意思就是與下方的資料位置對齊後，將資料從後台遍歷呈現
* */
for (let i = 0;i < data.length;i++){
html += "<tr>" +
"<td>" +data[i].name + "</td>" +
"<td>" +data[i].age + "</td>" +
"<td>" +data[i].sex + "</td>" +
"</tr>"
}
//html() 方法返回或设置被选元素的内容 (inner HTML)。
$("#content").html(html);
})
})
})
</script>
```
效果：成功
[jQuery.post的使用](https://hackmd.io/Gz9fkRvRSMGGo4RsT1jHJA)
Sign in with Wallet
Connect another wallet