본문 바로가기
JSP Servlet

비동기식페이지2(JSON , Ajax)

by noddu 2021. 2. 8.
728x90
반응형

nodeJS <-> no-SQL (json기반으로 주고받음)

 

 

 

$ { } - EL

$(  ) -선택자(id,class,Tag) -DOM(tree구조)

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    
 });
</script>

JQuery

ready(function( ){        ->        ready(( )=>{

                            람다식

 

 

 

 

$.ajax({ 

옵션들    url : mapping이름, 서버와요청하는 이름

            type : get방식( url뒤에 ?를붙인것처럼 사용 ->쿼리스트링 -> request객체에 저장)

           data : 서버로 보내는 data(여러개도가능) {"변수" : 값}

                                       한글 data가 있으면 post방식으로!!!!!!

                                      get방식으로 한글data가있으면 깨짐!!!(일반적으로 쓰지않음)

      datatype : 서버에서 데이터가 오는 타입 (json)

       success : 성공했을때 응답 (매개변수)=>

         error :  alert (실패);

//success : function(data){
            success :(data)=>{
                $(".msg").html(data.sensor+" : "+data.on);

                //$("#msg").html(data);
if(data.on == 1) {
                    $("#led").html("<img src='images/on.JPG' >");
                } else {
                    $("#led").html("<img src='images/off.JPG' >");
                }
            },

callback함수 - 함수 응답이오면 뒤에서 응답을 받아서 처리하는 함수

           (비 동기식) ▼

 

$.ajax({
            url : "ajax.do", //AjaxController
            type : "get",
            dataType : "json",
            data : { "led" : led },
            
            //success : function(data){
            success :callback,

            //error : function() {
            error : () => {
                alert('실패');
            }
        });
    });
});

function callback(data){
    $(".msg").html(data.sensor+" : "+data.on);

    //$("#msg").html(data);
    if(data.on == 1) {
        $("#led").html("<img src='images/on.JPG' >");
    } else {
        $("#led").html("<img src='images/off.JPG' >");
    }
}

★JSON <-> VO

success : resultHtml로도 작성가능.

 

 

 

public static void main(String[] args) {
		//JSON API : Gson
		List<MemberVO> list = new ArrayList<MemberVO>();
		MemberVO vo = new MemberVO();
        
        vo.setId("admin4");
	        vo.setMname("관리자");
	        vo.setMemail("admin4@admin.com");
	        vo.setMage(20);
	        vo.setMtel("010-5555-2222");
	        list.add(vo);
	        
	        Gson g = new Gson();
	        String json = g.toJson(list);
	        System.out.println(json);
		//ArrayList에 팀원들의 정보를 저장하고 ->JSON으로 출력
		//[{   },{   },{   }]

list를 이용해 list.add(추가), json방식으로 회원리스트 출력하기

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(()=>{
    $("#btn").click(()=>{
    	$.ajax({
    		url : "ajaxlist.do",  //<-------AjaxListController
    		type : "get",
    		datatype : "json",    //<----------json
    		success : resultHtml,
    		error : function(){ alert("error"); }
    	});
    });
 });
 function resultHtml(data){
	 alert(data);
 }
</script>
</head>
<body>
<input type="button" value="회원리스트보기" id="btn"/>
<hr>
<div id="list">여기에 회원리스트를 출력</div>
</body>
</html>

■ajax02.html

 

@WebServlet("/ajaxlist.do")
public class AjaxListController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		MemberDAO dao = new MemberDAOImpl();
		List<MemberVO>list = dao.memberList();
		
		Gson g = new Gson();
		String json = g.toJson(list);
		
		response.setContentType("text/json;charset=UTF-8");   
	    PrintWriter out = response.getWriter();
	    out.println(json);  //resultHtml(data)
	}

}

 

Gson API 이용해서 json방식으로(배열식)나타내기 ▼ (RESTAPI라고 할수있다)

 

▲json방식으로 잘 출력되나 테스트

 

 

 

 

 

▲json으로 받았더니 모두 object로 표시됐다.

 

 

▲function resultHtml(data){ console.log(data)} 로 console에서 보기(F12)

 

 

■jQuery의 반복문 - $.each(data, function(index,vo){    });

function resultHtml(data){
	 console.log(data);
	 // 반복문
	 var view ="";
	 view+="<table>";
	 view+="<tr>";
	 view+="<td>번호</td>";
	 view+="<td>아이디</td>";
	 view+="<td>비밀번호</td>";
	 view+="<td>이름</td>";
	 view+="<td>나이</td>";
	 view+="<td>이메일</td>";
	 view+="<td>전화번호</td>";
	 view+="</tr>";
	 $.each(data, function(index,vo){
		 view+="<tr>";
		 view+="<td>"+vo.num+"</td>";
		 view+="<td>"+vo.id+"</td>";
		 view+="<td>"+vo.pass+"</td>";
		 view+="<td>"+vo.mname+"</td>";
		 view+="<td>"+vo.mage+"</td>";
		 view+="<td>"+vo.memail+"</td>";
		 view+="<td>"+vo.mtel+"</td>";
		 view+="</tr>";
	 });
	 view+="</table>";
	 $("#list").html(view);  //동적으로 출력
 }
</script>
</head>
<body>
<input type="button" value="회원리스트보기(Ajax)" id="btn"/>
<hr>
<div id="list">여기에 회원리스트를 출력</div>
</body>
</html>

view+= 에 tag를 넣어서 테이블만들고 data에서

회원리스트 each문으로 반복하여 출력하기

 

▼결과

 

 

 

 

 $(document).ready(()=>{
	 mlist();
   $("#btn").click(()=>{
	   mlist();
    });
 });
 function mlist(){
	    	$.ajax({
	    		url : "ajaxlist.do",  //<-------AjaxListController
	    		type : "get",
	    		datatype : "json",    //<----------json
	    		success : resultHtml,
	    		error : function(){ alert("error"); }
	    	});
 }

■ajax02.html에서 mlist라는 메소드를 만들어 ready하는동시에 ajaxlist.do의 회원리스트가 뜨게하기

                 (mlist 메소드안에는 원래 mlist호출하는 곳에있던  $.ajax를 넣어서 호출해야 실행함)

 

 

 

*jQuery 에서 CSS를 handling(스타일 변환)할수있는 함수 -> .css("속성","value");

 

*jQuery( )  - jQery메소드는 set,get둘다 가능

        .css set(a , a) - 매개변수2개

        .css get(a) - 매개변수 1개

 

 

 

 view+="<input type='button' value='회원가입' class='btn btn-primary' onclick='insertForm()'/>";
	 view+="</td>";
	 view+="</tr>";
	 view+="</table>";
	 $("#list").html(view);  //동적으로 출력
 }
 function insertForm(){
	 //$(".panel-group").css("visibility","visible");
	 var div=$(".panel-group").css("visibility");
	 if(div=="hidden"){
		 $(".panel-group").css("visibility","visible");
	 }else{
		 $(".panel-group").css("visibility","hidden");
	 }
	 //alert(div);
 }

회원가입이라는 value를 onclick 할때마다 hidden일때 visibility,

visibility일때에는 hidden으로 바꿈(회원가입 하는 테이블을)

 

 

 

●serialize() 함수

JQuery에서 form에있는 파라미터들을 한번에 가져올수있는 함수 (직렬화해서 가져옴)

 //회원가입 버튼이 클릭되었을때
   $("#sendbtn").click(()=>{
	   var formData = $("#frm").serialize();
	   alert(formData);
	   $.ajax({
		   url : "ajaxinsert.do",  //AjaxInsertController
		   type : "post",
		   data : formData,
		   success : mlist,
		   error : function(){alert("error");}
	   });

alert(formData);로 먼저 확인해보면 다음과 같다 ▼

 

그리고 url에 쓴것과 맞춰서 ajaxinsert.do로 mapping한  AjaxInsertController를 만들어

@WebServlet("/ajaxinsert.do")
public class AjaxInsertController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8"); // euc-kr
		String id=request.getParameter("id");
		String pass=request.getParameter("pass");
		String mname=request.getParameter("mname");
		int mage=Integer.parseInt(request.getParameter("mage")); // "111"->111
		String memail=request.getParameter("memail");
		String mtel=request.getParameter("mtel");
		MemberVO vo=new MemberVO(id, pass, mname, mage, memail, mtel);
		MemberDAO dao=new MemberDAOImpl();
		
		int cnt = dao.memberInsert(vo);
		PrintWriter out = response.getWriter();
		out.println(cnt);

 

 

다음과 같이 적으면 회원가입 버튼을 누를때마다 입력한 정보를 위의 회원 리스트에 바로 저장된것을 볼수있다▼

회원가입 누를때마다 회원리스트에 바로저장

 

 

 

 

 

 

function mdelete(num){
	$.ajax({
		url : "ajaxdelete.do",  //AjaxDeleteController
		type : "get",
		data : {"num":num},
		success : mlist,
		error : function(){alert("error");}
	});
 }

회원리스트에서 delete할 함수를 다음과같이 만들고, insert와 마찬가지로 AjaxDeleteController라는 서블릿만들고 

PrintWriter out = response.gerWriter();

out.println(cnt);     <----  (cnt) 여기선 꼭 필요하진않음

 

 

* Jquery  함수 trigger() 를 쓰면 강제로 클릭 이벤트를 발생시킬수 있음

 

 

ajax -> 서버에통신하고 서버의응답을

callback함수가 응답을 처리 (비 동기)

 

visibility : hidden (또는visible) - 안보이게 하지만 공간은 남아있음(보이게)

display:none  (또는block) -  안보이게하고 공간도 차지하지않음(보이게)

 

visibillity -> display
visible -> block
hidden -> none

이렇게하면 공간차지없이 안보이게할수있다.

 

 

 

function updateFn(){
	 var formData = $("#ufrm").serialize();
	//alert(formData);
	$ajax({
		url : "ajaxupdate.do", //AjaxUpdateController
		type : "post",
		data : formData,
		success : mlist,
		error : function(){alert("error");}
	});
 }

updateFn 함수!    ▲

form에서 넘기는 type은 post로!!!! 

 

 

 

@WebServlet("/ajaxupdate.do")
public class AjaxUpdateController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		
		int num = Integer.parseInt(request.getParameter("num"));
	    int mage = Integer.parseInt(request.getParameter("mage"));
	    String memail = request.getParameter("memail");
	    String mtel = request.getParameter("mtel");
	      
	    MemberVO vo = new MemberVO();
	    vo.setNum(num);
	    vo.setMemail(memail);
	    vo.setMtel(mtel);
	    vo.setMage(mage);
	    
	    MemberDAO dao = new MemberDAOImpl();
	    int cnt=dao.memberUpdate(vo);
	    
	    PrintWriter out = response.getWriter();
	    out.println(cnt);
	}

AjaxUpdateController 서블릿 만들고 ajaxupdate.do로 mapping해서

update하는 controller만들기

 

 

 

 

view+="<input type='button' value='EXCEL에저장하기'>";
	 view+="&nbsp;<input type='button' value='PDF에저장하기'>";

                          ▲&nbsp - 공백줄때 사용! (여기서는 두 버튼사이의 공백을 주기위해 사용)

반응형

'JSP Servlet' 카테고리의 다른 글

회원인증  (0) 2021.02.16
MyBatis API 활용  (0) 2021.02.08
비동기식페이지(JQuery,Ajax,JSON)  (0) 2021.02.08
회원관리 MVC2+HandlerMapping+JSTL  (0) 2021.02.08
회원관리 MVC2(forward+FrontController)  (0) 2021.02.08

관련글

티스토리툴바