jquery + xml + json + asp 활용 예제

jquery + xml + json 활용 예제 모음입니다

jQuery를 사용해서 JSON의 데이터를 읽어서 사용하는 예제입니다.

JSON Data { 'US' : {'AK' : 'Alaska', 'AL' : 'Alabama'}, 'CA' : {'AB' : 'Alberta', 'MB' : 'Manitoba'} } jQuery 스크립트 $.getJSON('/state.json',function(data) { $.each(data.US, function(key,state) { $($select_state).append('<option value="' + key + '">' + state + '</option>'); }); });

[출처 : http://gyuha.tistory.com/342]

---

훌륭한 JSON Parser가 있어 소개부터 시작한다

https://github.com/rcdmk/aspJSON

어지간한 웹 소스들이 그러하듯 이 github의 asp용 json의 라이센스는 MIT 무료라이센스되시겠다.

사용법도 간단하다.

그냥 select된 레코드셋 객체를 JSON객체에 넣어버리면 끝

먼저 aspJSON공개소스를 include

<!--#include virtual = "jsonObject.class.asp" -->

객체 생성

dim JSON

set JSON = New JSONobject

select하는거야 다들 하는거니 패스하고

이렇게 생성된 레코드셋 객체(rs)를 LoadRecordset을통해 할당해주고 Write해버리면 끝

JSON.LoadRecordset rs

JSON.Write()  

다음은

asp client에서 jQuery를 통해 AJAX로 (한때 에이잭스를 아작스라 콩글리쉬를 뽐내던 후임이 있었는데 급 떠오름 ㅎㅎ)    위에서 생성된 JSON을 불러오는 코드

// 위에서 select한 결과가 총 3건을 리턴한다 가정하고 조회 필드는 IDX, SUBJECT라 할때 아래와 같이

// json.data[배열].필드명 으로 하면 훌륭하게 alert이 찍히는것을 확인할 수 있다.

// 또한 조회된 레코드가 없는지 있는지 확인하려면 length로 조사하여 0이면 없다 0보다 크면 처리 해주면 되시겠다.

// alert(json.data.length);

// 아래 $("#btnCall").click을 통해 호출된 실질적인 AJAX 함수 구현 부분 <script> function fnCall() { $.ajax({ type: "POST", dataType: "json", url: "list_loading.asp", data: "codeName=1", //대충 코드값이 1인 녀석이라 칭하자.. success: function(json) { alert(json.data[0].IDX + '\n\n' + json.data[1].IDX + '\n\n' + json.data[2].IDX + ' '); alert(json.data[0].BSUBJECT + '\n\n' + json.data[1].SUBJECT + '\n\n' + json.data[2].SUBJECT + ' '); }, error: function(xhr, option, error) { alert(xhr.status); alert(error); } }); } $(document).ready(function() { $("#btnCall").click(function(e) { // id가 btnCall이란 버튼을 클릭하였을 경우 e.preventDefault(); fnCall(); // AJAX 함수 호출 }); }); </script> [출처 : http://hippalus.tistory.com/213]

---

  

자바스크립트의 foreach 구문을 이용하여 JSON 객체의 키(key)와 값(value)를 쉽게 가져올 수 있다. 

jQuery를  사용한다면 $.each 구문을 대신 사용할 수도 있다.

□ Javascript

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'};

for(key in json) {

    alert('key:' + key + ' / ' + 'value:' + json[key]);

}

 

□ jQuery

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; 

$.each(json, function(key, value){

    alert('key:' + key + ' / ' + 'value:' + value);

});

index.asp

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> function fn_submit(){ $.ajax({ type: "POST", dataType: "json", url: "result.asp", data: {}, success: function(json) { alert(json.xml값); }, error: function(xhr, option, error) { alert(xhr.status); alert(error); } }); } </script>

result.asp

<% Response.CharSet = "utf-8" Response.codepage = "65001" Response.ContentType = "text/html;charset=utf-8" Response.CacheControl = "no-cache" Response.Expires = -1 Response.Buffer = True Response.AddHeader "Pragma", "no-cache" url = "https://test.api.com/api" Set XMLDOM = Server.CreateObject("Microsoft.XMLHTTP") XMLDOM.open "GET", url, false XMLDOM.send xmlData = XMLDOM.responseText response.write xmlData %>

[출처 : http://gent.tistory.com/17]