먼저 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>

--------------------------------------------------------------------


설정

트랙백

댓글