JQuery + Ajax의 조합

JQuery + Ajax 로 합쳐진 문제를 풀기에 앞서 먼저 Ajax를 설명해드리겠습니다.

 

Ajax는 어렵고, 다양한 작업을 웹페이지에 구현하기 위해서 웹페이지와 상호 작용할 수 있도록 하는 기술이라고 보시면 되는데요. 이 Ajax의 형태를 보여드리면 다음과 같습니다.

 

Ajax 코드 형태

Ajax코드에서 type은 GET, POST방식을 다 받을 수 있는데 지금은 GET만 사용하고 나중에 POST 사용 법을 추가로 작성하겠습니다.

 

url은 요청할 url , data는 요청하면서 함께 줄 데이터 인데 단순히 데이터를 받아오는 경우에는 줄 내용이 없으니 비워두시면 됩니다. 성공적으로 받아오는 경우에 대해서 success에 어떤 방식으로 결과를 나타낼지 코드를 작성해 주면 됩니다.

 

문제를 통해서 확인 해보도록 하겠습니다.

 

Ajax + jQuery 문제

 

문제를 보시면 업데이트를 누를 때 마다 구와 미세먼지를 표기가 나오도록 해야하는데요.

 

버튼 부분 만드는 부분은 넘어가고 Ajax으로 넘어가기 전에 OpenAPI가 어떤 Dictionary 형태인지 먼저 확인해볼께요. 

 

( OpenAPI는 공공데이터포털에서 받으실 수 있습니다. Open이라고는 하지만 링크 등을 함부로 올릴 수 없기 때문에 유튜브나 블로그를 참고하셔서 직접 다운 받으시는게 좋습니다. )

 

서울시 미세먼지 OpenAPI 일부분

RealtimeCityAir 안에 row라는 Array가 존재하고 그 Array안에 값들이 나열되어 있는 모습을 볼 수 있습니다.

지금 필요한 내용은 구 와 미세먼지 이므로 "MSRSTE_NM" 과 "IDEX_MVL"을 가져 오면 되겠습니다.

 

OpenAPI 불러오는 코드

이해를 안가는 상황이 발생할 수 있기 때문에, 첨부한 주석을 보시면서 설명을 보시면 되겠습니다.

 

Ajax 자체의 틀은 똑같고 이제 success안의 값을 어떤 값을 넣는지를 보면, 아까 RealtimeCityAir 안에 있는 row 값들을 가져오기로 했기때문에 그 값을 가져오고 그림 상에서 25개의 ArrayList라 적혀있었기때문에 row의 길이 즉, row.length 만큼 돌면서 필요한 구와 미세먼지 값을 받고 버튼을 눌렀을때, 출력 되도록 코드를 넣었습니다. 결과 사진을 보여드리면

 

미세먼지 OpenAPI 코드 결과

 

두번째 문제를 보여드리겠습니다.

 

따릉이 OpenAPI 문제

두번째 문제는 미세먼지때 처럼 따릉이 OpenAPI를 받아서 만들어 보도록 하겠습니다. 만들기에 앞서 따릉이 OpenAPI는 어떤 Dictionary 형태인지 보겠습니다.

 

따릉이 OpenAPI 일부분

 

똑같은 방법으로 확인을 해보자면 getStationList 안에 있는 row값이 있고 거치대 위치, 거치대 수, 현재 거치된 따릉이 수를 받아와야하기 때문에 stationName, rackTotCnt, parkingBikeTotCnt 를 가져오면 되겠습니다.

 

따릉이 코드

마찬가지로 이해를 안가는 상황이 발생할 수 있기 때문에, 첨부한 주석을 보시면서 설명을 보시면 되겠습니다.

 

값들이 getStationList에 row에 존재 했으므로 그 값을 받아온 후, 위치, 총 개수, 현재 사용한 개수의 값들을 변수로 선언해서 위의 그림이 테이블 형태이브로 <tr></tr> 로 해서 값을 넣고 버튼을 눌렀을때 값들이 첨부되어 업데이트 되도록 합니다.

 

결과 사진을 보여드리면 다음과 같습니다.

 

따릉이 결과 사진

천천히 생각하면서 값을 따라서 써보면 금방 금방 하실수 있습니다.