Ajax12 jQuery, Ajax로 한 페이지에 있는 여러 개의 폼을 전송하기 (쇼핑몰 상품 목록의 경우) How to submit multiple forms in a same page with jQuery/Ajax and get multiple return values via json. (e-commerce site) 쇼핑몰에서 고객이 상품을 장바구니에 담고 그 값을 다른 페이지에서 처리한 뒤 다시 상품 페이지로 돌아가 페이지가 리프레시된다면 썩 좋은 방법은 아니다. (아니면 같은 페이지에서 DB 처리를 할 수도 있겠지?)그래서, 화면을 리프레시하지 않고 어떤 결과값을 받아오기 위해 사용되는 것이 ajax다. 위의 그림에서 보듯이 상품목록에는 여러 개의 form 값이 들어가게 된다.이걸 ajax로 전송하려면 어떻게 해야할까?그리고 여러 개의 결과값을 받으려면 어떻게 해야할까?구글링을 하다가 몇 가지 힌트를 .. 2014. 8. 16. [고급] AJAX 데이터베이스 예제 AJAX를 데이터베이스와 함께 사용하면 좀 더 상호적일 수 있다. AJAX 데이터베이스 예제 다음의 예제는 AJAX 기술을 이용해 데이터베이스로부터 정보를 얻어오는 방법에 대해 보여준다. (데모 실행하기) AJAX 예제 설명 예제는 단순한 HTML 폼과 자바스크립트 연결을 포함하고 있다. Select a Customer: Alfreds Futterkiste North/South Wolski Zajazd Customer info will be listed here. 위에서 볼 수 있듯이 "customers"라는 드롭다운박스와 간단한 HTML 폼으로 되어 있다. 폼 아래의 는 웹서버로부터 정보를 얻어와 보여주는 자리이다. 사용자가 데이터를 선택하면, "showCustomer()" 함수가 실행된다. 이 함수는.. 2009. 8. 4. [고급] AJAX 제시어 소스코드 제시어 예제를 위한 AJAX 소스 코드 아래의 소스 코드는 앞서 살펴봤던 AJAX 예제이다. 복사 후 붙여넣기를 통해 시도해 볼 수 있다. AJAX HTML 페이지 HTML 페이지이다. 간단한 HTML 폼과 자바스크립트 연결을 포함하고 있다. First Name: Suggestions: (*주: txt1이라는 입력 필드에 이름을 입력하면 사용자 모르게 서버에 요청을 하고 서버에서 다시 제시어 값을 되돌려주면 txtHint 영역에 제시어가 나타나는 예제이다. AJAX의 원리에 대해 모른다면 2009/07/28 - [AJAX] - [기초] AJAX 튜토리얼 시리즈부터 먼저 살펴보자.) AJAX 자바스크립트 "clienthint.js" 파일로 저장한 자바스크립트 코드이다. var xmlhttp function.. 2009. 8. 3. [고급] AJAX 제시어 예제 원문 : AJAX Tutorial AJAX는 보다 인터랙티브한 응용프로그램을 만드는데 쓰일 수 있다. AJAX 제시어 예제 다음의 AJAX 예제는 사용자가 HTML 폼에 데이터를 입력하는 동안 어떻게 웹 페이지가 웹 서버와 통신하는지를 보여준다. (데모 실행하기) 예제 설명 - HTML 폼 위 데모 폼은 아래 소스와 같이 구성되어 있다. First Name: Suggestions: "txt1" 이라는 입력 필드를 가진 단순한 HTML 폼이다. 입력 필드를 위한 이벤트 속성은 onkeyup 이벤트일 때 동작하는 함수를 정의하고 있다. 폼 밑의 문단에서는 "txtHint"라는 span을 포함하고 있다. 이 span은 서버로부터 데이터를 받아 보여주는 역할을 한다. 사용자가 데이터를 입력했을 때 "showHi.. 2009. 8. 3. [기초] AJAX - 서버 측 스크립트 AJAX - 서버 측 PHP 스크립트 현재 시간을 보여주는 서버에서 돌아갈 스크립트를 만든다. responseText 속성은 서버로부터 돌려받은 데이터를 저장하게 된다. 여기서 현재 시간을 돌려주고 싶다. "time.php" 코드는 아래와 같다. 참고 : 캐시에 저장된 내용이 보여지는 것을 막기 위해 페이지가 캐쉬되지 않도록 한다. 첫 AJAX 응용프로그램 실행하기 원본 페이지에서 직접 실행해보기 바란다. (주: 서버의 시간을 가져오는 것이므로 로컬시간과 다르게 보일 수 있다.) 페이지가 새로고침되지 않고 서버에 있는 "time.php"에서 실행된 서버의 시간을 가져와 "시간" 필드에 뿌려준다. 2009. 7. 28. [기초] AJAX - 서버에 요청하기 AJAX - 서버에 요청 보내기 서버에 뒷단에서 요청을 보내기 위해서는 open()과 send() 메소드를 사용한다. open() 메소드는 3개의 인수를 가진다. 첫 번째는 어떤 방식으로.(GET 또는 POST) 요청을 보낼 것인지에 대한 정의이다. 두 번째는 서버측 스크립트의 URL을 지정한다. 세 번째 인수는 비동기적으로 다뤄져야 하는지를 정한다. send() 메소드는 서버에 요청을 보낸다. 만약 HTML과 PHP 파일이 같은 디렉토리에 있다고 한다면 코드는 아래와 같다. xmlhttp.open("GET","time.php",true); xmlhttp.send(null); 이제 언제 AJAX 함수를 실행할지 정해야 한다. 우리는 이 함수를 사용자가 "이름" 필드에 무언가 입력했을 때 뒷단에서 실행하게.. 2009. 7. 28. [기초] AJAX - XMLHttpRequest 객체 AJAX - XMLHttpRequest 객체에 대해 서버에 백그라운드로 데이터를 보내기에 앞서 3가지 중요한 XMLHttpRequest 객체의 속성에 대해 살펴본다. onreadystatechange 속성 서버에 요청을 보낸 뒤 서버로부터 데이터를 되돌려 받을 함수가 필요하다.(주: 경기시작과 함께 포수가 투수에게 공을 준 뒤 다시 투수가 던지는 공을 받기 위해 글로브를 벌려둔 상태라고 상상하자. 언제든지 공을 받을 준비가 되어있어야 한다.) onreadystatechange 속성은 서버로부터의 응답을 처리할 함수를 저장한다. 자동으로 호출되는 속성 내에 이 함수를 저장한다. 다음의 코드는 onreadystatechange 속성을 설정하고 빈 함수를 저장한다. xmlhttp.onreadystatechan.. 2009. 7. 28. [기초] AJAX 브라우저 지원 AJAX - 브라우저 지원 AJAX의 핵심은 XMLHttpRequest 객체다. 최근의 모든 브라우저들은 내장된 자바스크립트 XMLHttpRequest 객체를 사용해 XMLHttpRequest 객체를 만든다. (IE5, IE6는 ActiveObject를 사용한다.) 앞서만든 "testAjax.htm" 파일에 XMLHttpRequest 객체를 생성하는 자바스크립트를 추가해보자. 이름: 시간: 예제 설명 : 1. XMLHttpRequest 객체를 저장할 xmlhttp 변수를 만든다. 2. xmlhttp=new XMLHttpRequest() 에서 XMLHttpRequest 객체 생성을 시도한다. 3, 만약 실패했을 경우, xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")로 시.. 2009. 7. 28. [기초] AJAX 예제 첫 번째 AJAX 응용프로그램 AJAX가 작동하는 법을 이해하기 위해 작은 AJAX 응용프로그램을 만들 것이다. 첫번째로 "이름"과 "시간" 2개의 입력 필드를 가진 표준 HTML 폼을 만든다. "이름" 필드에는 사용자가 입력을 하고 "시간" 필드는 AJAX가 채운다. HTML 파일은 "testAjax.htm" 이라고 하고 아래와 같다.(HTML 폼에 제출하기 버튼이 없다) 이름: 시간: AJAX의 주요역할에 대해서는 다음 장에서. 2009. 7. 28. 이전 1 2 다음
