member.html
ajax를 이용한 html 페이지
<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"> <script src="../../js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script> $(document).ready(()=> { // 삭제 $('#btn_remove').click(()=>{ var ck = []; $('.ck:checked').each((index,item)=>{ ck.push($(item).val()); }); $.ajax({ url:'/rest/MemberRemove' , type:'get' , data:{ck:ck} , dataType : 'json' , success:(item)=>{ let id=''; $(item).each((index,item)=>{ id +=`${item} `; }); alert(`${id}삭제`); $('#btn_list').trigger('click'); } , error : ()=>{ alert('삭제실패'); } }); }); // 추가 $('#btn_add').click(()=>{ var id = $('#id').val(); var pw = $('#pw').val(); var name = $('#name').val(); var age = $('#age').val(); var gender = $('#gender').val(); $.ajax({ url:'/rest/MemberAdd' , type:'POST' , data:{id:id,pw:pw,name:name,age:age,gender:gender} , dataType : 'json' , success:(item)=>{ alert(`${item.name}님 추가`); $('#btn_list').trigger('click'); } , error : ()=>{ alert('추가실패'); } }); }); // 수정 $('#btn_modify').click(()=>{ var id = $('#id').val(); var pw = $('#pw').val(); var name = $('#name').val(); var age = $('#age').val(); var gender = $('#gender').val(); $.ajax({ url:'/rest/MemberModify' , type:'POST' , data:{id:id,pw:pw,name:name,age:age,gender:gender} , dataType : 'json' , success:(item)=>{ alert(`${item.name}님 수정`); $('#btn_list').trigger('click'); } , error : ()=>{ alert('수정실패'); } }); }); // 목록 $('#btn_list').click(()=>{ $.ajax({ url:'/rest/MemberList' , type:'GET' , dataType : 'json' , success:(item)=>{ $('#list').empty(); $(item).each((index,item)=>{ let node = `<tr>`; node += `<td><input type="checkbox" class="ck" value="${item.id}"></td>`; node += `<td>${item.id}</td>`; node += `<td>${item.pw}</td>`; node += `<td>${item.name}</td>`; node += `<td>${item.age}</td>`; node += `<td>${item.gender}</td>`; node += `</tr>`; $('#list').append(node); }); } , error : ()=>{ alert('요청실패'); } }); }); }); </script> </head> <body class="container"> <table class="table"> <thead> <tr> <th>id</th> <th>pw</th> <th>name</th> <th>age</th> <th>gender</th> <th>추가</th> <th>수정</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="id"></td> <td><input type="password" id="pw"></td> <td><input type="text" id="name"></td> <td><input type="text" id="age"></td> <td> <select id="gender"> <option value="m">남</option> <option value="f">여</option> </select> </td> <td><button id="btn_add">add</button></td> <td><button id="btn_modify">modify</button></td> </tr> </tbody> </table> <button id="btn_list">회원리스트</button> <table class="table"> <thead> <tr> <th></th> <th>id</th> <th>pw</th> <th>name</th> <th>age</th> <th>gender</th> </tr> </thead> <tbody id="list"> </tbody> </table> <button id="btn_remove" class="btn">remove</button> </body> </html>
'JAVA HTML JAVASCRIPT > 소오스' 카테고리의 다른 글
| 유효성검사(validation), 데이터 바인딩, 타입 변환 (0) | 2020.03.12 |
|---|---|
| Validation Check (0) | 2020.03.12 |
| spring - Maven 을 이용한 프로젝트 생성 및 활용(2) (0) | 2020.02.26 |
| spring - Maven 을 이용한 프로젝트 생성 및 활용(1) (0) | 2020.02.26 |
| [Java] Tag라이브러리(JSTL) 사용하기 (0) | 2020.02.25 |
