AJAX 를 이용한 List 출력

• index

<script>
	// 1. ajax 방식으로 로그인 요청
	// 2. 결과값에 따라 관리자(admin)일 경우 memberList 보여 줄것
	// ** ajax 는 페이지를 이동하면서 데이터를 전달 할수 없다.
	// ** 특정페이지에 먼저 와서, 그 페이지에서 데이터를 요청해서 받은다음 그려야 한다.
	$('#login').on('click',function(){
		var id =$('input[name="id"]').val();
		var pw=$('input[name="pw"]').val();				
		console.log(id+"/"+pw);
				
		$.ajax({
			type:'post', // get | post
			url:'login', // action
			data:{'id':id,'pw':pw}, // parameter
			dataType:'JSON', // 반환받을 데이터 형태(JSON,TEXT,HTML,XML)
			success:function(data){
				console.log(data);
				alert(data.msg);
				if(data.id!=null){
					if(data.perm!=null){
						location.href = 'memberList';
					}else{
						location.href = 'boardList';
					}
				}
			}, // 성공했을 경우 실행할 함수(결과값은 매개변수로 들어온다.)
			error:function(e){
				console.log(e);			
			} // 실패 했을 경우(에러 정보가 매개변수로 들어온다.)		
		});
	});
</script>

• 두 테이블에 LEFT JOIN 을 이용하여 원하는 데이터 조회

<select id="login" parameterType="map" resultType="map">
	 	SELECT m.id,a.perm,m.name FROM member m LEFT JOIN author a ON m.id = a.id
	 		WHERE m.id =#{id} AND m.pw = #{pw}
	</select>

• AJAX를 이용해 HTML에 그리기

				var content ='';
// for문을 사용하여 받아온 리스트의 속성을 하나씩 추가한다.
				for(var i=0; i<data.size; i++){
					content +='<tr>';
					content +='<td>'+data.list[i].id+'</td>';
					content +='<td>'+data.list[i].name+'</td>';
					content +='<td>'+data.list[i].email+'</td>';
					content +='</tr>';
				}
				//$('#list').append(content);		
				$('#list').html(content);