<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="/Scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var API_URL = "/api/maximservice/";
function clearStatus() {
$("#status").html('');
}
function clearField() {
$("#name").val('');
$("#content").val('');
}
function displayData() {
$('#lstMaxims').html('');
$.getJSON(API_URL, function (data) {
$.each(data, function (key, val) {
var str = val.id + ", " + val.name + ", " + val.content;
$("<li/>", { html: str }).appendTo("#lstMaxims");
});
});
}
$(function () {
displayData();
$("#btnAdd").click(function () {
clearStatus();
var name = $('#name').val();
var content = $('#content').val();
var json =
"{name:\"" + name + "\", content:\"" + content + "\"}";
$.ajax({
url: API_URL,
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: json,
statusCode: {
201: function (data) {
var str =
data.id + ", " + data.name + ", " + data.content;
$("<li/>", { html: str }).appendTo("#lstMaxims");
}
}
});
clearField();
});
$("#btnFind").click(function () {
clearStatus();
clearField();
var id = $("#id").val();
$.getJSON(API_URL + id, function (data) {
$("#name").val(data.name);
$("#content").val(data.content);
}).fail(function (xhr, textStatus, err) {
$("#status").html("에러 : " + err);
});
});
$("#btnUpdate").click(function () {
clearStatus();
var id = $("#id").val();
var name = $('#name').val();
var content = $('#content').val();
var json =
"{id:\"" + id + "\", name:\"" + name + "\", content:\"" + content + "\"}";
$.ajax({
url: API_URL + id,
cache: false,
type: 'PUT',
contentType: 'application/json; charset=utf-8',
data: json,
success: function () {
displayData();
}
}).fail(function (xhr, textStatus, err) {
$('#status').html("에러 : " + err);
});
clearField();
});
$("#btnDelete").click(function () {
clearStatus();
var id = $("#id").val();
$.ajax({
url: API_URL + id,
cache: false,
type: 'DELETE',
contentType: 'application/json; charset=utf-8',
data: {},
success: function () {
displayData();
}
}).fail(function (xhr, textStatus, err) {
$("#status").html("에러 : " + err);
});
clearField();
});
});
</script>
</head>
<body>
<h2>명언 리스트</h2>
<div>
<h3>명언 리스트</h3>
<ul id="lstMaxims"></ul>
</div>
<div>
<h3>명언 상세</h3>
<div>
<label for="id">번호: </label>
<input type="text" name="id" id="id" value="" />
</div>
<div>
<label for="name">이름: </label>
<input type="text" name="name" id="name" value="" />
</div>
<div>
<label for="content">내용: </label>
<input type="text" name="content" id="content" value="" />
</div>
<div>
<input type="button" name="btnAdd" id="btnAdd" value="추가" />
<input type="button" name="btnFind" id="btnFind" value="찾기(번호검색)" />
<input type="button" name="btnUpdate" id="btnUpdate" value="수정" />
<input type="button" name="btnDelete" id="btnDelete" value="삭제" />
</div>
</div>
<div>
<p id="status"></p>
</div>
</body>
</html>