고정 헤더 영역
상세 컨텐츠
본문
다른 서버에 있는 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 안내]
- 해당 예제는 espriter_practice/WebContent/'03_12_jQuery_jsonp' 에 있습니다.
본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.
'Development > JS' 카테고리의 다른 글
| 라즈베리파이에 Mariadb 설치하기 #2 (0) | 2018.05.09 |
|---|---|
| jQuery - 다른 도메인 서버의 json 자료 읽기 예제 (0) | 2018.03.08 |
| jQuery - JSON 데이터를 호출하고 검색 건수 확인 예제 (0) | 2018.03.08 |
| jQuery - Ajax 전담 메소드를 활용하여 json,xml 읽기 예제 (0) | 2018.02.28 |
| jQuery - Ajax로 자료 읽기 예제 (0) | 2018.02.28 |
| jQuery - jQuery 기본 예제 #8 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #7 (0) | 2018.02.27 |
댓글 영역