 |
|
| |
| jQuery 비동기 Ajax 통신을 해보자!! - JSON방식 |
|
|
  |
8년 전
|
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" : "실패"
}
각 소스를 화면에 띄워서 실행하도록 해보자.
|
|
 추천 : 253 |
추천
목록
|
|
| |
|
