본문 바로가기
Front-end/JQuery

[jQuery/AJAX ] Jquery를 이용한 AJAX연결과 예제

by 꼬바리 2021. 4. 29.

#Jquery #AJAX #JAVASCRIPT

 

지금까지는 javascript를 이용하여 함수를 생성하고

비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다.

 

이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다.

 

핵심 코드 

 

$.ajax({

 

1. url : 자원 (XX.do, json, xml, jsp, html) 

2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text

3. type : 어떤 방식으로 데이터를 가져오느냐? post, get

4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값

5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술

 

});

 

 

 

[ a21_jsonLoad.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import="springWeb.z01_vo.*,java.util.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="path" value="${pageContext.request.contextPath }"/>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/a00_comm/com.css"/>
<script type="text/javascript" src="${path}/a00_comm/jquery-1.10.2.js"></script>
 
<script>
    $(document).ready(function(){
        
        $("h3").click(function(){
           
            $.ajax({
                
                url : "a12_data.jsp",
                dataType : "json",
                success : function(data){
                    
                    $("table").html("<tr><th>번호</th><th>이름</th><th>나이</th><th>사는곳</th></tr>");
                    var show = "";
                    
                    $.each(data,function(index, item){
                   
                        show += "<tr><td>"+(index+1)+"</td>";
                        show += "<td>"+item.name+"</td>";
                        show += "<td>"+item.age+"</td>";
                        show += "<td>"+item.loc+"</td></tr>";
                                             
                    });
                    $("table").append(show);
                }
            });
        }); 
    });
 
</script>
 
</head>
<body>
<center>
<h3>로드 json</h3>
 
<table>
 
</table>
 
</center>
 
</body>
</html>

 

 

a12_data.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
 
[
{"name":"안녕맨","age":"27","loc":"서울"}, 
{"name":"하이맨","age":"25","loc":"인천"},
{"name":"하이요","age":"26","loc":"경기"}
]

 

 

결과 창 입니다.

 

 

로드 json을 클릭하였을때, 아래의 json 데이터들이 ajax를 통하여 전달 된 모습입니다.

javascript로 하는것 보다는 jquery로 하는게 좀더 간편한것 같습니다.

 

출처 : m.blog.naver.com/PostView.nhn?blogId=duddnddl9&logNo=220568856214&proxyReferer=https:%2F%2Fwww.google.com%2F

728x90

댓글