728x90
static에 index.html을 만들어줌
cdnjs - The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil
cdnjs.com
여기 들어가서
JQuery검색 해서 복사해옴
붙여넣기
JQuery는 자바스크립트와 같다 대신
자바스크립트를 사람들이 잘 못써서 문법의 일관성을 위해 만들어짐
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="list"></div>
<form>
넘버 : <input type="text" name="sujiNum" value="" placeholder="번호를 입력하세요"><br/>
이름 : <input type="text" name="sujiName" value=""><br/>
내용 : <textarea type="text" name="sujiContent" value=""></textarea><br/>
파일 : <input type="text" name="sujiFile" value=""><br/>
<button type="button" id="create">생성</button>
<button type="button" id="search">조회</button>
<button type="button" id="update">수정</button>
<button type="button" id="delete">삭제</button>
</form>
<script>
const $upBtn = $("#update");
const $delBtn = $("#delete");
const $search = $("#search");
const $creBtn = $("#create");
const $sujiNum =$("input[name='sujiNum']");
const $sujiName =$("input[name='sujiName']");
const $sujiContent=$("textarea[name='sujiContent']");
const $sujiFile=$("input[name='sujiFile']")
$upBtn.on("click",()=>{
let sujiVO = {
sujiNum:$sujiNum.val(),
sujiName:$sujiName.val(),
sujiContent:$sujiContent.val(),
sujiFile:$sujiFile.val()
}
console.log("sujiVO",sujiVO);
$.ajax({
url : "/rest/suji",
type : "put",
data:JSON.stringify(sujiVO),
dataType : "text",
contentType : "application/json; charset=utf-8",
async : true,
success : function(rslt){
console.log(rslt)
if(rslt){
alert("잘 입력 되엇어요");
getList();
}else{
alert("입력되지 않았어용");
}
},
error:function(xhr, status, error){
console.log("code: " + xhr.status)
console.log("message: " + xhr.responseText)
console.log("error: " + error);
}
});
});
$delBtn.on("click",()=>{
console.log("확인 : ",$sujiNum.val())
$.ajax({
url : `/rest/suji/${$sujiNum.val()}`,
type : "delete",
dataType : "text",
success : function(rslt){
if(rslt){
console.log(rslt)
getList();
}else{
alert("없는 넘버에용! 알겠어용?!");
getList();
}
},
error:function(xhr, status, error){
console.log("code: " + xhr.status)
console.log("message: " + xhr.responseText)
console.log("error: " + error);
}
});
});
$search.on("click",()=>{
console.log("확인 : ",$sujiNum.val())
$.ajax({
url : `/rest/suji/${$sujiNum.val()}`,
type : "get",
dataType : "text",
success : function(rslt){
if(rslt){
console.log(rslt)
rslt = JSON.parse(rslt);
$sujiName.val(rslt.sujiName);
$sujiContent.val(rslt.sujiContent);
$sujiFile.val(rslt.sujiFile);
}else{
alert("없는 넘버에용! 알겠어용?!");
}
},
error:function(xhr, status, error){
console.log("code: " + xhr.status)
console.log("message: " + xhr.responseText)
console.log("error: " + error);
}
});
});
$creBtn.on("click",()=>{
let sujiVO = {
sujiName:$sujiName.val(),
sujiContent:$sujiContent.val(),
sujiFile:$sujiFile.val()
}
console.log("sujiVO",sujiVO);
$.ajax({
url : "/rest/suji",
type : "POST",
data:JSON.stringify(sujiVO),
dataType : "text",
contentType : "application/json; charset=utf-8",
async : true,
success : function(rslt){
console.log(rslt)
if(rslt){
alert("잘 입력 되엇어요");
getList();
}else{
alert("입력되지 않았어용");
}
},
error:function(xhr, status, error){
console.log("code: " + xhr.status)
console.log("message: " + xhr.responseText)
console.log("error: " + error);
}
});
});
//JQuery 생성자는 낭비되지 않도록 잘 사용해야함
//여러번 사용될 거로 예상될 때는 꼬옥 변수로 받아서 사용!
const $list = $("#list");
//window.addEventListener("DOMContentLoaded" 이벤트
// $(function(){
// getList();
// });
$(()=>{
getList();
})
//페이지 시작하자마자 리스트 뿌리깅
function getList(){
$.ajax({
type:"get",
url:"/rest/suji",
//data:"", //보낼 데이터가 없어서 생략
dataType:"text",// 요걸 알아서 해줌 JSON.parse(xhr.responseText),클라이언트에서 해줌
//contentType:"application/json; charset=utf-8", //보낼데이터가 없어서 생략
//async:"true", //디폴트가 true라서 안써도됨 생략
success:function(rslt){
console.log("체킁 : ",JSON.parse(rslt));
rslt = JSON.parse(rslt);
//정렬도 클라이언트 사이드에서 하면 성능이나 , 서버부하
//줄이는 측면에서 유리함
rslt.sort((a,b)=>{
return b.sujiNum-a.sujiNum;
})
//빨랑 테이블로 출력해보삼
let tblStr = "<table border=1>"
tblStr += "<tr><td>넘버</td><td>이름</td><td>내용</td><td>파일</td></tr>"
for(let i=0; i<rslt.length; i++){
tblStr += `<tr><td>${rslt[i].sujiNum}</td><td>${rslt[i].sujiName}</td><td>${rslt[i].sujiContent}</td><td>${rslt[i].sujiFile}</td></tr>`
}
tblStr +="</table>"
//disp에 뿌리기
$list.html(tblStr)
},
error:function(xhr, status, error){
console.log("code: " + xhr.status)
console.log("message: " + xhr.responseText)
console.log("error: " + error);
}
});
}
</script>
</body>
</html>
'Spring > Spring 기초' 카테고리의 다른 글
| e7e샘의 파일 업로드 및 다운로드!!(유용) (0) | 2023.08.28 |
|---|---|
| e7e샘의 파일 업로드 및 인설틍! (0) | 2023.08.28 |
| e7e샘의 sts4 spring boot 두번째 (0) | 2023.08.24 |
| e7e샘의 Spring boot 설치 및 환경설정 (0) | 2023.08.23 |
| e7e샘 restful방식 연습 (0) | 2023.08.23 |
