지난 시간에는 html페이지를 만들어서 해당 url을 호출하여 화면에 비동기방식으로 뿌리는 것을 샘플링과 함께 설명을 했다.
파일타입은 html뿐만 아니라 jsp,php,asp 등 모든 웹소스 구동 페이지면
어느 언어건 상관이 없다 ㅎㅎ
오늘은 json타입으로 비동기 호출을 해보도록 할꺼임.
json은 data받아오고 각각의 구분자에 맞춰서 화면표출하는것 때문에 자주이용
한다.
json 타입으로 게시판을 작성하도 상관은없지만, 핸들링 해주는게 html타입보다는 불편함.
이번에는 다음과 같은 형태의 로직으로 샘플링을 짜도록 하겠다.
1. index.html - selectbox 1개, 버튼 1개가, ajax 화면을 뿌릴 div태그 1개
2. list1.json - flag : Y , data : '성공'
3. list2.json - flag : N , data : '실패'
위 3개의 소스의 가상로직은 데이터를 조회하다보면 데이터가 있고, 없는 경우가
있다.
예를들어 게시판의 검색같은?
솔직히 select 필요는 없지만 구분자를 통해 화면에 결과값을 나눠서 뿌리고자
json 파일을 두개 만들어보았다.
ajax에 대해서 14장에서 html 예를 들었으니 오늘은 그저 각각 통소스 샘플링만
공개하도록 하겠음.
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#searchButton").click(function(){
var flag = $("#resultSelect").val();
//select box로 구분을 주었지만
//실질적으로는 내부로직에서 db조회하여 데이터가 있으면
//json 파싱하여 데이터 생성을 하고
//없으면 데이터 없음으로 파싱해야한다
if(flag == "Y") {
url = "/list1.json";
} else {
url = "/list2.json";
}
//비동기 통신을 하여 json타입으로 호출한다.
$.ajax({
url: url
, dataType : 'json'
, success: function(data) {
//result결과
//json객체의 flag가 Y이면 data라는 성공메시지를 result변수에 담는다.
if(data.flag == "Y"){
var result = data.data;
//json객체의 flag가 Y가아닌 그이후는 data라는 실패메시지를 result변수에 담는다.
} else {
var result = data.data;
}
//div태그에 html로 출력!!
$("#listLayout").html(data.data);
}
});
})
})
</script>
</head>
<body>
<select id="resultSelect">
<option value="Y">성공JSON</option>
<option value="N">실패JSON</option>
</select>
<input type="button" id="searchButton" value="조회" /><br/>
<div id="listLayout"></div>
</body>
</html>
2. list1.json 파일소스
{
"flag" : "Y",
"data" : "성공"
}
3. list2.json 파일소스
{
"flag" : "N",
"data" : "실패"
}
각 소스를 화면에 띄워서 실행하도록 해보자.
그리고 약간씩 변경을 하여 어떻게 저런식으로 결과물이 나오는지 이해를 하도록 하자!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식 (2) | 2014.06.30 |
|---|---|
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |