Web Ajax 활용

model 1

ajax를 사용하여 jsp파일을 통해 db에서 json을 불러와 출력

  • JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// MVC model1

// DB 접근
String userName = "홍길동";
int userNumber = 1001;

String json = "{\"num\":"+userNumber + ", \"name\":\""+userName+"\"}"; //따옴표를 쓰려고 \ 을 사용
System.out.println(json);

out.println(json);
%>
  • HTML
<p id='demo'></p>
<br>

<button type="button">click</button>

<script type="text/javascript">
$(function() {
	$('button').click(function() {
		$.ajax({
			/////////////////////////send 
			url:"data.jsp",
			type:"get",
			datatype:"json",	// 데이터를 json 형태로 보낼기 위해 데이터 타입을 잡아줌 
			////////////////////////	data를 통해 보내주지만 현재는 안보내줌
			success:function(obj){ 
			//	alert('success');
			//	alert(obj);	문자열로 넘어온다 , data.jsp 에서 문자열
				let json = JSON.parse(obj); // 문자열을 json으로 변경
			//	alert(json);
				alert(json.name); // 이름 접근
			},
			error:function(){
				alert('error');
			}
		});
	});
});
</script>

model 2

ajax를 사용하여 servlet을 통해 db에서 json을 불러와 출력

  • HTML
<p id='demo'></p>
<br>
<input type="text" id="id">
<button type="button">click</button>

<script type="text/javascript">
$(function() {
	$("button").click(function() {
		$.ajax({
			url:"custuser",
			type:"get",
			datatype:"json",
			//data:"id=ABC&pwd=123",
			data:{id:$("#id").val(),pwd:"123"},
			success:function(json){
			//	alert("success");
			//	alert(json.str);
			//	alert(json.map.title);	// 제이손 -> 맵 -> 키값
			
				let custlist = json.map.custlist; // 리스트를 받아준다
				alert(custlist[0].id);
				alert(custlist[0].name);
			},
			error:function(){
				alert("error");
			}
		});
	});
});
</script>
  • Servlet
  • Servlet에서 Ajax으로 데이터를 보내기 위해서는 jar파일을 lib에 넣어주어야한다

image

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dto.CustUserDto;
import net.sf.json.JSONObject;

@WebServlet("/custuser")
public class CustUserServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//System.out.println("CustUserServlet doGet");
		String id = req.getParameter("id");   // Ajax에서 보내준 데이터를 받을 수 있다
		String pwd = req.getParameter("pwd");
	//	System.out.println(id+" "+pwd);
		
		// 전송 data
		JSONObject jobj = new JSONObject();	//json으로 변환
		//jobj.put("str", "Hello");	//String 전송
		
		// hashmap을 통한 데이터 전달
		/*HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("title", "사과");
		
		jobj.put("map", map);*/ // HashMap 전송
		
		
		// list 를 통한 데이터 전달
		List<CustUserDto> list = new ArrayList<CustUserDto>();
		list.add(new CustUserDto("aaa", "홍길동", "서울시"));
		list.add(new CustUserDto("bbb", "일지매", "수원시"));
		
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("custlist", list);	//데이터를 묶어놓은 list를 map에 넣어주고
		
		jobj.put("map", map);	// 맵을 다시 json에 넣어준다
		
		
		resp.setContentType("application/x-json; charset=UTF-8");//한글이 깨진다 그래서 인코딩
		resp.getWriter().print(jobj);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("CustUserServlet doPost");
	
	}

}

모델 2 다른 방법

-html

<p id='demo'></p>
<br>
<!-- <input type="text" id="id"> -->
<button type="button">click</button>

<script type="text/javascript">
$(function() {
	$("button").click(function() {
		$.ajax({
			url:"./hello",	//경로지정
			type:"post",
			datatype:"json",
			success:function(json){
		//		alert('success');
			//	alert(json);
			//	alert(json[0].id);
			//	alert(json[0].name);
			//	alert(json[0].address);
				$.each(json, function(i,val){
					$("#demo").append("i:"+i+" id:"+ val.id+" name:"+val.name+" address:"+val.address+"<br>");  //i는 인덱스 번호, val.불러올 키값
				});
			},
			error:function(){
				alert("error");
			}
		});
	});
});
</script>

컨트롤러

  • 여기서 사용하는 jar는 gson-2.8.5.jar 이다.

image

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		/* 예시
		String str = "hello";
		// google json
		String gson = new Gson().toJson(str);	//json형태로 변환
		resp.getWriter().write(gson);	//데이터를 보내준다
		*/
		
		List<CustUserDto> list = new ArrayList<CustUserDto>();
		list.add(new CustUserDto("eee", "홍길동", "평양시"));
		list.add(new CustUserDto("ttt", "일지매", "베이징시"));
		
		resp.setContentType("application/json"); //json 으로 변환
		resp.setCharacterEncoding("UTF-8"); //한글깨짐 방지
		
		//gson-2.8.5.jar 추가해야함
		String gson = new Gson().toJson(list);	//리스트를 담는다.
		
		resp.getWriter().write(gson); //return 함수
		
	}
}

모델 2 Ajax 변경

HTML

<tr class="titleAf">
	<td height="2" bgcolor="#0000ff" colspan="3"></td>
</tr>

<!-- 여기에 추가 된다 -->

<tr>
	<td align="center" height="1" bgcolor="#c0c0c0" colspan="3">		
		<input type="submit" value="고객정보 삭제">
	</td>
</tr>
...

<script type="text/javascript">
//$(document).ready(function () {
$(function () {
	$.ajax({
		url:"./custData",
		type:"get",
		data:"work=data",	//work 값을 넘겨준다.
		success:function(datas){
			let custlist = datas.map.custlist;	//해쉬맵의 리스트를 넘겨준다
			
			$.each(custlist, function (i, val) {			
				let app = "<tr bgcolor='#f6f6f6'>" 
						+	"<td align='center' bgcolor='yellow'>" 
						+		"<input type='checkbox' name='delck' value='" + val.id + "'>"	//값에 아이디를 넣어줌(전체삭제시 필요)
						+	"</td>"		
						+	"<td>" + val.id + "</td>"	// 아이디 표시를 위해 값을 대입
						+	"<td>"
						+		"<a href='custcontroller?work=detail&id=" + val.id + "'>" + val.name + "</a>" 
											//컨트롤러에게 work값과 아이디 값을준다. 그리고 이름 값 대입
						+	"</td>"
						+ "</tr>"
						+ "<tr>"
						+ 	"<td height='2' bgcolor='#0000ff' colspan='3'></td>"
						+ "</tr>";
				
				$(".titleAf").eq(-1).after(app);	// class titleAf 뒤에 추가 eq(음수)는 선택된 (클래스)의 만 마지막인덱스
			});				
			
		},
		error:function(){
			alert('error');
		}
	});
	
});
</script>

Servlet

1. CustUserData

@WebServlet("/custData")
public class CustUserData extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String work = req.getParameter("work");
		
		if(work.equals("data")) {
			CustUserDao dao = CustUserDao.getInstance();			
			List<CustUserDto> list = dao.getCustUserList();
			
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("custlist", list);
			
			// 전송할 데이터를 추가
			JSONObject jobj = new JSONObject();
			jobj.put("map", map);			
			
			resp.setContentType("application/x-json; charset=UTF-8");
			resp.getWriter().print(jobj);
		}
	}

}

2. CustUserController

@WebServlet("/custcontroller")
public class CustUserController extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String work = req.getParameter("work");	
		
		if(work.equals("move")) {	
			forward("custuserlist.html", req, resp);	// 제일 처음 index의 링크의 work='move'(현재 깃허브에 안올림)
		}		
		else if(work.equals("detail")) {	//이름을 누르면 work의 값이 넘어와 이쪽 조건으로 들어오게된다.
			String id = req.getParameter("id");
			System.out.println("id:" + id);
			
			CustUserDao dao = CustUserDao.getInstance();
			CustUserDto custdto = dao.getCustuser(id);			
			// 보내줄 데이터
			req.setAttribute("cust", custdto);			
			// 이동
			forward("custuserdetail.jsp", req, resp);
		}
	}
	
	public void forward(String link, HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
		RequestDispatcher dis = req.getRequestDispatcher(link);
		dis.forward(req, resp);		
	}
}