글
Ajax를 이용한 데이터 추가 삭제
먼저 index.html 파일의 body 태그를 구성한다.
--------------------------------------------------------------------
<body>
<div>
<form id="insert_form">
<fieldset>
<legend>데이터 추가</legend>
<table>
<tr>
<td><label>상품명</label></td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td><label>모델 번호</label></td>
<td><input type="text" name="modelnumber" /></td>
</tr>
<tr>
<td><label>시리즈</label></td>
<td><input type="text" name="series" /></td>
</tr>
</table>
<input type="submit" value="추가" />
</fieldset>
</form>
</div>
<table id="output" border="1">
</table>
</body>
--------------------------------------------------------------------
그럼 화면 상으로는 이렇게 출력이 된다
이젠 head 태그를 구성한다. 다음과 같이 jQuery를 추가한다.
데이터를 가져오고 추가하는 부분만 만들 것이므로,
데이터를 보여주는 함수와 입력 양식에 이벤트를 연결한다.
--------------------------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Ajax Sample</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
//데이터를 보여주는 함수
function selectData() {
//#output내부의 내용물 제거
$('#output').empty();
//Ajax 수행
$getJSON('/products', function(data) {
$(data).each(function(index, item) {
var output = '';
output += '<tr>';
output += ' <td>' + item.id + '</td>';
output += ' <td>' + item.name + '</td>';
output += ' <td>' + item.modelnumber + '</td>';
output += ' <td>' + item.series + '</td>';
output += '</tr>';
$('#output').append(output);
});
});
}
//데이터 추가
$('#insert_form').submit(function(event) {
//Ajax 수행
var data = $(this).serialize();
$.post('/products', data, selectData);
//기본 이벤트 제거
event.preventDefault();
});
//초기 화면에 데이터 표시
selectData();
});
</script>
</head>
--------------------------------------------------------------------
'안 것' 카테고리의 다른 글
Spring Web Flow(스프링 웹 플로우) (0) | 2014.01.04 |
---|---|
장 폴 사르트르- 실존이 본질에 선행한다 (0) | 2013.10.29 |
귀납과 연역, 괴델의 불완정성 정리 (0) | 2013.10.08 |