각진 세상에 둥근 춤을 추자

Ajax를 이용해 서버의 데이터를 요청해 출력할 수 있었다. 이번에는 직접 JSON 데이터를 생성하여 전송해 본다. 먼저, JSON 데이터를 입력할 폼을 구현한다. 1. 전송 폼 구현하기 Ajax 데이터 전송 2. 기능 구현하기 3. 전체 코드 화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다. Ajax 데이터 전송 데이터 전송 url을 네이버로 하였다. 검증되지 않은 데이터이기 때문에 네이버에서는 수락하지 않는다. 위 기능 구현 코드에서 e.preventDefault(); 라는 코드를 작성했다. 이 코드는 form 내에 submit 버튼을 눌렀을 때 새로 실행하지 않아도 작동되게 한다.

이번에는 데이터 하나가 아닌 여러 개의 데이터를 Ajax를 이용해 요청해 출력해 본다. http://chhak.or.kr/data/users.json 1. 화면 구현하기 클라이언트가 데이터를 받아 올 화면을 아래 사진과 같이 구현한다. Ajax 데이터 처리 데이터 요청 아이디 이름 휴대폰 나이 2. 기능 구현하기 Ajax를 이용해 서버의 데이터를 요청한다. 3. 전체 코드 화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다. Ajax 데이터 처리 데이터 요청 아이디 이름 휴대폰 나이

아래의 링크는 JSON객체로 생성된 서버이다. http://chhak.or.kr/data/user.json Ajax를 통해 위 JSON 데이터를 요청해 본다. Ajax는 비동기 방식 통신 기술이다. 즉, 클라이언트가 화면을 구현하고 서버는 해당 화면에 알맞는 데이터만 전송한다. (1) 화면 구현하기 다음과 같은 폼을 작성한다. Ajax 데이터 요청 데이터 요청 아이디 : 이름 : 휴대폰 : 나이 : (2) 기능 구현하기 데이터를 요청하는 코드를 작성하기 전 제이쿼리를 적용하는 라이브러리를 구글에서 가져온다. https://developers.google.com/speed/libraries 호스팅된 라이브러리 | Hosted Libraries | Google Developers 가장 많이 사용되는 오픈소스..

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. jQuery 탐색 함수 서울 대전 대구 부산 서면 경성대 해운대 남포동 광주

제이쿼리란? 제이쿼리(jQuery)는 자바스크립트를 이용해 만든 라이브러리 언어로, 자바스크립트를 쉽게 사용할 수 있도록 돕는 오픈소스 라이브러리를 말한다. 즉, 자바스크립트 코드를 좀 더 직관적으로 이해할 수 있도록 짧고 단순한 형태의 코드로 작성할 수 있다. // 자바스크립트 document.getElementsById("p").innerHTML="웹 프로그래밍"; // 제이쿼리 $(선택자).동작함수(); $("#p").html("웹 프로그래밍"); 제이쿼리 파일은 아래 사이트를 방문해 다운한다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes t..