<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="static/jquery-3.6.4.js"></script>
<script type="text/javascript">
function fn_ajax(){
$.ajax({
type : 'POST',
url : 'book_select_list.ajax',
data : JSON.stringify(),
dataType : 'JSON',
success : function(resp) {
var list=resp;
var html = "";
for(let i = 0; i<list.length; i++){
var b_id = list[i].b_id;
var b_nm = list[i].b_nm;
var author = list[i].author;
var publisher = list[i].publisher;
html += `<tr>`;
html += ` <td><a href="javascript:fn_detail('${b_id}')">${b_id}</a></td>`;
html += ` <td>${b_nm}</td>`;
html += ` <td>${author}</td>`;
html += ` <td>${publisher}</td>`;
html += `</tr>`;
}
var objtbody = document.querySelector("#my_tbody");
objtbody.innerHTML = html;
},
error : function() {
alert('error');
}
});
}
function fn_detail(b_id){
var obj_b_id = document.querySelector("#b_id");
var obj_b_nm = document.querySelector("#b_nm");
var obj_author = document.querySelector("#author");
var obj_publisher = document.querySelector("#publisher");
$.ajax({
url : 'book_select.ajax',
type : "get",
contentType : 'application/json; charset=utf-8',
data : { b_id : b_id },
dataType : "json",
success : function(resp) {
var book = resp;
console.log(book.b_id);
$("#b_id").val(book.b_id),
$("#b_nm").val(book.b_nm),
$("#author").val(book.author),
$("#publisher").val(book.publisher)
},
error : function() {
alert('error');
}
});
}
function fn_add(){
$.ajax({
url : 'book_add.ajax',
type : "post",
data : {
b_id : $("#b_id").val(),
b_nm : $("#b_nm").val(),
author : $("#author").val(),
publisher : $("#publisher").val()
},
dataType : "json",
success : function(resp) {
console.log(resp);
var cnt = resp;
if(cnt == 1){
fn_ajax();
alert("정상적으로 추가되었습니다.");
$("#b_nm").val("");
$("#author").val("");
$("#publisher").val("");
} else {
alert("추가 중 문제가 생겼습니다.");
}
},
error : function() {
alert('error');
}
});
}
function fn_mod(){
$.ajax({
url : 'book_mod.ajax',
type : "post",
data : {
b_id : $("#b_id").val(),
b_nm : $("#b_nm").val(),
author : $("#author").val(),
publisher : $("#publisher").val()
},
dataType : "json",
success : function(resp) {
console.log(resp);
var cnt = resp;
if(cnt == 1){
fn_ajax();
alert("정상적으로 수정되었습니다.");
$("#b_nm").val("");
$("#author").val("");
$("#publisher").val("");
} else {
alert("수정 중 문제가 생겼습니다.");
}
},
error : function() {
alert('error');
}
});
}
function fn_del(){
$.ajax({
url : 'book_del.ajax',
type : "post",
data : {
b_id : $("#b_id").val(),
},
dataType : "json",
success : function(resp) {
console.log(resp);
var cnt = resp;
if(cnt == 1){
fn_ajax();
alert("정상적으로 삭제되었습니다.");
$("#b_nm").val("");
$("#author").val("");
$("#publisher").val("");
} else {
alert("삭제 중 문제가 생겼습니다.");
}
},
error : function() {
alert('error');
}
});
}
$(document).ready(function(){
fn_ajax();
});
</script>
</head>
<body>
book_list <br />
<a href="javascript:fn_ajax()">ajax</a>
<table border="1px">
<tr>
<td>책번호</td>
<td>책이름</td>
<td>작가</td>
<td>출판사</td>
</tr>
<tbody id="my_tbody">
</tbody>
</table>
<table border="1px">
<tr>
<td>책번호</td>
<td>
<input type="text" id="b_id" />
</td>
</tr>
<tr>
<td>책이름</td>
<td>
<input type="text" id="b_nm" />
</td>
</tr>
<tr>
<td>작가</td>
<td>
<input type="text" id="author" />
</td>
</tr>
<tr>
<td>출판사</td>
<td>
<input type="text" id="publisher" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="추가" onclick="fn_add()" />
<input type="button" value="수정" onclick="fn_mod()" />
<input type="button" value="삭제" onclick="fn_del()" />
</td>
</tr>
</table>
</body>
</html>