DB를 이용한 data 등록 및 변경 #01

해당 파일을 구동하기 위해서는 많은 툴들이 필요하다. 처음에는 모든 script를 html문서 내에서 작성했었지만 외부 js파일로 추출하는 작업, 함수들을 간략화 하는 작업 등을 거쳐서 다음과 같은 코드가 만들어졌다.

---

app.js

window.onload = function() {
loadMemberList();
clearForm();

$('btnAdd').onclick = function() {
try {
validateForm();
addMember();
} catch (err) {
alert(err);
}
return false;
};

$('btnCancel').onclick = function() {
$('noSpan').style.display = 'none';
$('btnUpdate').style.display = 'none';
$('btnDelete').style.display = 'none';
$('btnCancel').style.display = 'none';
$('btnAdd').style.display = '';
};

$('btnUpdate').onclick = function() {
updateMember();
};

$('btnDelete').onclick = function() {
deleteMember($('no').value);
};
};

function validateForm() {
var pass1 = $('pass1').value;
var pass2 = $('pass2').value;
if (pass1 != pass2) {
throw '암호가 일치하지 않습니다!';
}
var name = $('name').value;
var email = $('email').value;
if (name == '' || email == '') {
throw '이름과 이메일은 필수 입력 항목입니다!';
}
}

function loadMemberList() {
$.ajax('http://localhost:8080/web02/member/ajax/list.do', {
method: 'GET',
success: function(members){
var memberTable = $("memberTable");
clearMemberList();
var tr = null, td = null, a = null;
members.forEach(function(member){
tr = document.createElement('tr');
tr.setAttribute('class', 'dataRow');
[member.no,
member.name,
member.email,
member.tel].forEach(function(value,index,arr){
td = document.createElement('td');
if (index == 1) {
td.innerHTML = '<a href="#"' +
' onclick="readMember(' + arr[0] +
'); return false;">' +
value + '</a>';
} else {
td.innerHTML = value;
}
tr.appendChild(td);
});
td = document.createElement('td');
a = document.createElement('a');
a.href = '#';
a.onclick = function(event) {
deleteMember(member.no);
event.preventDefault();
};
a.innerHTML = '삭제';
td.appendChild(a);
tr.appendChild(td);

memberTable.appendChild(tr);
});
},
error: function(msg){
alert('회원 정보를 읽을 수 없습니다!');
console.log(msg);
}
});
}

function clearMemberList() {
var memberTable = $("memberTable");
var trList = document.querySelectorAll('.dataRow');
for (var i = 0; i &lt; trList.length; i++) {
memberTable.removeChild(trList[i]);
}
}

function addMember() {
$.ajax('http://localhost:8080/web02/member/ajax/add.do', {
method: 'POST',
data: {
name: encodeURIComponent($('name').value),
email: encodeURIComponent($('email').value),
password: $('pass1').value,
tel: encodeURIComponent($('tel').value),
age: $('age').value
},
success: function(result){
loadMemberList();
clearForm();
},
error: function(msg){
alert('회원 등록 실패!');
console.log(msg);
}
});
}

function clearForm() {
var event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
$('btnCancel').dispatchEvent(event);
}

function deleteMember(no) {
$.ajax('http://localhost:8080/web02/member/ajax/delete.do?no=' + no, {
method: 'GET',
success: function(result){
loadMemberList();
clearForm();
},
error: function(msg){
alert('회원 삭제 실패!');
console.log(msg);
}
});
}

function readMember(no) {
$.ajax('http://localhost:8080/web02/member/ajax/read.do?no=' + no, {
method: 'GET',
success: function(result){
$('no').value = result.no;
$('name').value = result.name;
$('email').value = result.email;
$('tel').value = result.tel;
$('age').value = result.age;

$('noSpan').style.display = '';
$('btnUpdate').style.display = '';
$('btnDelete').style.display = '';
$('btnCancel').style.display = '';
$('btnAdd').style.display = 'none';
},
error: function(msg){
alert('해당 멤버 정보를 읽을 수 없습니다!');
console.log(msg);
}
});
}

function updateMember() {
$.ajax('http://localhost:8080/web02/member/ajax/update.do', {
method: 'POST',
data: {
no: $('no').value,
name: encodeURIComponent($('name').value),
email: encodeURIComponent($('email').value),
tel: encodeURIComponent($('tel').value),
age: $('age').value
},
success: function(result){
loadMemberList();
clearForm();
},
error: function(msg){
alert('회원 변경 실패!');
console.log(msg);
}
});
}

---

bit.js

function bit(id) {
  return document.getElementById(id);
}

var $ = bit;

/* AJAX 기능 수행
 * url : 서비스를 가리키는 URL. string
 * options : AJAX 요청 시 필요한 값을 담은 객체
 * data - 원격 함수에 전달할 데이터
 * success - 원격 함수의 호출이 성공적으로 끝났을 때 호출 될 메소드
 * error - 원격 함수의 호출이 실패 했을 때 호출 될 메소드
 * method - 원격 함수 호출 방법(요청방식 : GET, POST)
 */
bit.ajax = function(url, options){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var result = JSON.parse(xhr.responseText).jsonResult;
if(result.resultStatus==0){ // 원격 함수 호출 성공!
if(options.success) options.success(result.data);
}else{ // 원격 함수 호출 실패
if(options.error) options.error(result.error);
}
}
};
xhr.open(options.method, url, true);
if (options.method=='GET'){
xhr.send(null);
}else{ // POST
var queryString = '';
for(var key in options.data){
if(queryString.length>0) queryString += '&';
queryString += key + '=' + options.data[key];
}
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(queryString);
}
};