상세 컨텐츠

본문 제목

jQuery - 다른 도메인 서버의 json 자료 읽기 예제

Development/JS

by 에스프리터 2018. 3. 8. 01:08

본문


다른 서버에 있는 jsp 파일에 존재하는 json 데이터를 읽어오는 예제입니다.
jq11.html은 당사자(본인)의 서버에 위치되어져야 하는 파일이며 jq11.jsp는 상대측에서 실행되어야 하는 파일입니다.
따라서 jq11.html의 URL 항목은 예제 파일의 jq11.jsp에서 "상대측 경로 ip/jq11.jsp"와 같은 형태가 되어야 합니다.

<시작▼ | 파일명 :jq11.html >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
          $("#btn1").on("click", aa);
});
     function aa(){
          //alert("a");
          $.ajax({
              type:"get",
              url:"jq11.jsp", // 실제로는 "상대방 IP 주소 경로/jq11.jsp"가 되어야 함
              dataType:"jsonp",
              jsonp:"callback",
              success:function(data){
                   var res = data.datas;
                   //alert(res + " " + res.length);
                   var imsi = "";
                   $(res).each(function(ind, entry){
                        imsi = "<div>" + entry.no + " - "+entry["name"] + "</div>";
                        $("#disp").append(imsi);
                   });
              },
              fail :function(){
                   alert("읽기 실패");
              }
          });
     }
</script>
</head>
<body>
** 다른 도메인 서버의 json 자료 읽기 **<br>
<button id ="btn1">test</button>
<hr>
<div id ="disp"></div>
</body>
</html>
<▲종료▲ | 파일명 : jq11.html >

<시작▼ | 파일명 : jq11.jsp >
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String funcName = request.getParameter("callback");
if(funcName !=null){
%>
     <%=funcName %>(
     {"datas":
     [    
          {"no":"10","name":"에스프리터"},
          {"no":"10","name":"홍두깨"},
          {"no":"10","name":"고길동"}
     ]
     }
     );
<%
}
%>
<▲종료▲ | 파일명 : jq11.jsp >




[ 결과 이미지]




[Github 안내] 
- Github에서 파일을 확인하시려면 바로가기를 눌러주세요.
- 해당 예제는 espriter_practice/WebContent/'03_12_jQuery_jsonp' 에 있습니다.


본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.

태그

관련글 더보기

댓글 영역