---
# System prepended metadata

title: Resful Ajax

---

# Resful Ajax

前後端分離用json來交換資料

現在發出http請求不一定要透過Form表單

restcontroller 把物件用json格式丟出去

![](https://hackmd.io/_uploads/Sylrt0Bwn.png)

![](https://hackmd.io/_uploads/ry4BYASP3.png)


entity
透過header來設定要回傳什麼type
所以上面是controller也可以傳回不同格式

不只頁面


![](https://hackmd.io/_uploads/SyoIK0Sv2.png)
沒有在設定檔新增這行設定，就只能使用http的 get/post方法


局部更改才做ajax，如果要render更改80%畫面就用跳轉方式


上課錄影
https://drive.google.com/drive/folders/1-KxTMnezmyGwgCvkOrQ4atYYBW4bofRf?usp=sharing


new js file 方式  .js
![](https://hackmd.io/_uploads/SyD5KArvh.png)


3個等號= 聯資料型別都有判斷


清除快取方式
![](https://hackmd.io/_uploads/S14RtCBw3.png)


![](https://hackmd.io/_uploads/Syly5RHDh.png)


預設
![](https://hackmd.io/_uploads/BkI7cAHw2.png)


回傳的格式不寫會自動幫你自動偵測
![](https://hackmd.io/_uploads/SyMN50Bv3.png)


![](https://hackmd.io/_uploads/BJE_qRSwh.png)


將解析內容轉成JS 物件，後續才能繼續對資料進行其他操作


axios cdn
![](https://hackmd.io/_uploads/HJZ2cCHvn.png)


![](https://hackmd.io/_uploads/HJah5AHv2.png)


把axios檔案複製過去
![](https://hackmd.io/_uploads/ryOA5RHPn.png)


這樣是因為我們沒有.map的檔案
![](https://hackmd.io/_uploads/HJIgsRBP2.png)


![](https://hackmd.io/_uploads/SJW4iRrPn.png)


![](https://hackmd.io/_uploads/S19mi0SDh.png)

![](https://hackmd.io/_uploads/S194s0Bvh.png)

有了@JsonProperty會從讀JAVA屬性
轉成讀@JsonProperty標籤裡面的屬性

![](https://hackmd.io/_uploads/rJHSoRHPh.png)


重整頁面時候 有prevent default 就不會再詢問你重複送出表單


---

利用ajax 和JS 讓送出後，
底下顯示前三筆

![](https://hackmd.io/_uploads/H1x12CBvh.png)

![](https://hackmd.io/_uploads/SJD13ABw3.png)

先開發 Restful api
用 postman 做測試
寫前端
form 要做 preventdefault

功能: 新增資料後，印出最新的前三筆(Ajax)

![](https://hackmd.io/_uploads/SyIbnRSw3.png)

{
   "text":"這隨便打"
}

在controller 寫完api 方法就到postman去做測試


//DTO 專門接受前端傳過來的資料
//當回傳@RequestBody 跟目前現有物件不匹配時，可以在建立一個DTO物件，但裡面不要有entity

![](https://hackmd.io/_uploads/H1WY2RBwh.png)


redirect是get請求


            <!-- 把原本showMessages的兩個form 都用ajax取代 -->
![](https://hackmd.io/_uploads/r1U93CrPh.png)


送ajax 回傳 但頁面


ajax type屬性(舊版)-->method(新版)

---

```
//JS 沒有insertAfter 所以自己寫一個方法來做轉換
//insertBefore 把東西塞到東西之前
function insertAfter(referenceNode, newNode){
    referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling)
    //referenceNode.nextSibling 為<span>的下一個Node，我們要在下一個Node前面加入東西
}
```

---

在專案資料夾內新增README.md檔 寫說明文件
.md就是markdown格式的意思

---

程式相關技術：
Servlet / JSP / JDBC / Spring Boot / Spring / Spring MVC / Hibernate / MSSQL / MySQL / HTML / CSS / JavaScript / Restful API / Ajax / Git / GitHub / jQuery/Maven

---

controller 寫完就趕緊去測試api

![](https://hackmd.io/_uploads/rka5QZPv3.png)
![](https://hackmd.io/_uploads/BkzsQ-DD2.png)

下拉選擇file (可選擇text/file)


---

可以在資料庫設定unique讓照片不會重複，或是儲存前利用判斷檢查是否重複

public static void main(String[] args)


ORM就是幫你把Java物件對應到資料庫的資料

JDBC速度比較快

追求速度的環境不能用ORM

ORM還要額外產生JDBC程式，所以很追求速度環境不要用ORM

spring-boot-devtool 是設定一存檔就幫你重新載入的pom.xml設定

要記錄每一家面試問過你的問題，但是最好是離開公司之後再做筆記，才不會下次問一樣問題但又回答不出來

功能做的越複雜越好

1. 紀錄使用者輸入的資料有沒有包含不合規格的文字，有就跳出訊息，不給輸入

2. 跳頁時紀錄記錄使用者是幾點幾分跳頁的


瀏覽紀錄
沒有登入時候存
1. cookie
2. session(分為有登入的和沒登入的)
但要怎麼處理登入和沒登入的session?如何交換

沒有想法就去大一點的公司看他們怎麼做這功能，去思考要怎麼做，不要做單純的CRUD，但還是要先有再想怎麼做複雜

---

網頁 透過form ，用dto來傳資料/接資料 

@restcontroller 才是用ajax，不是用dto