목록[Ajax & Jquery] (6)
Everything has an expiration date

`$.ajax()` 를 통한 Ajax 비동기 데이터 전송 처리 - Json 객체 수신 : view 페이지 jQuery 구조 // 페이지로 전달할 변수를 GET 방식 문자열 변수로 구성 var params = "변수1=" + $("#변수1").val() + "&변수2=" + $("#변수2").val(); $.ajax( { type:"POST" , url:"요청할 페이지 url" , data:params , dataType:"json" , success:function(jsonObj) { var out = ""; var json속성값1 = jsonObj.json속성값1; var json속성값2 = jsonObj.json속성값2; // 읽어들인 값들을 빈 문자열에 추가한다. out += " json속성값1 :..

AjaxJquery04 $.ajax( { type:○ , url:○ , data:○ , success:function(args) , beforeSend:function() , error:function() }); Jquery의 `$.ajax()` 함수를 통한 비동기 Ajax 데이터 송수신 처리 - HTML, XML params="변수1=" + $("#변수1이 작성된 엘리먼트 id").val() + "&변수2=" + $.("#변수2가 작성된 엘리먼트 id").val(); ① [AjaxTest01, AjaxTest02, AjaxTest03] → AjaxTest_ok.jsp 페이지에서 `HTML 텍스트` or `${result}` 만 구성한 경우 【AjaxTest_ok.jsp 페이지 구성】 - HTML 변..

AjaxJquery01 Ⅰ. `$("선택자").load("로드를 원하는 html 문서의 위치와 이름")` 을 통한 실습 예시 $("선택자").load("로드를 원하는 html 문서의 위치와 이름") → jQuery 의 기능이 수행되는 과정에서 다른 html 문서를 로드한다. → 대상 페이지의 HTML 을 읽어들여서 `$("선택자")` 에 삽입한다. → ※ 이때, `$("선택자").load()`는 비동기 방식이므로 `alert()` 경고창이 load 이전에 표시되는 것을 확인할 수 있다. LoadTest01.html jQuery 의 load() 활용 실습 HTML 읽어오기 버튼 LoadTest02.html (LoadTest01.html 의 `#ctlGrid` 객체의 내부에 load 될 페이지) load(..

AjaxJquery03 `PostTest01.jsp` 에서 클라이언트가 제목(`#title`)과, 내용(`#content`)을 입력한 후 보내기 버튼(`#sendBtn`)을 클릭했을 때 Post 방식으로 `PostTest01_ok.jsp` 페이지로 데이터를 전송한 후, 다시 `PostTest01.jsp`에서 데이터를 받아와서 입력 값을 보이게 하는 실습 (간단히 확인하기 위해 MVC 모델 적용하지 않은 실습) PostTest01.jsp jQuery 의 post() 활용 실습 제목 내용 test PostTest01_ok.jsp 제목 : ${param.title } 내용 : ${param.content } `$("선택자").post(url, data, callBack 함수);` 를 사용하여 클라이언트가 입력..

AjaxJquery02 `$("선택자").get(url, data, callBack 함수)`를 이용하여 클라이언트로부터 입력받은 닉네임(`#nickName`) 을 `GetTest01_ok.jsp`에 GET 방식으로 전송한 후 그 결과를 다시 수신하여, `#resultDiv` 객체의 text 로 넣어준다. GetTest01.jsp jQuery 의 get() 활용 실습 눌러보자 GetTest01_ok.jsp ${param.nickName }님 안녕하세요 반갑습니다. `$("선택자").get(url, data, callBack 함수)` 을 이용하여 두 수의 연산 결과를 비동기 방식으로 처리하는 페이지 구현하기. web.xml ⓐ 클라이언트가 `http://localhost:3306/AjaxJquery01/ge..

AjaxJquery01 `$("선택자").load("로드를 원하는 html 문서의 위치와 이름");` 을 이용하여 LoadTest02.html 의 html 내용을 `#ctlGrid` 객체 내부의 텍스트로 로드하는 예제 ※ 비동기 방식으로의 데이터 송수신이므로, 경고창 `alert()`의 내용이 load 내용보다 먼저 나타남을 확인할 수 있다. LoadTest01.html (로드를 수행하는 주체 페이지) jQuery 의 load() 활용 실습 HTML 읽어오기 버튼 LoadTest02 (로드를 원하는 html 문서) load() 에 대한 실습 `$("선택자").load("로드를 원하는 html 문서의 위치와 이름")` 을 이용하여 두 수의 연산 결과를 비동기 방식으로 처리하는 페이지 구현하기. web.xm..