[KH정보교육원 당산] Ajax , JSON

Ajax

HTML 파일

버튼 클릭시에 ctlGrid 영역으로 HtmlSamplePage.html을 불러오게 되어있다.

 HtmlSamplePage.html

 

초기화면

클릭시에 경고창이 뜨고 확인을 누르게 되면

아래쪽 비어 있는 영역으로 html을 불러 오게 된다.

 

ajax

https://june-17.tistory.com/151

Ajax(Asynchronous Javascript And XML)

JSON

https://june-17.tistory.com/152

[WEB] JSON (JavaScript Object Notation)

---

 

 

 

예제1)

이번 예제에서는 JSON타입 사용

 

 

HTML

 

HTML

값을 입력하여 중복확인을 할것이다.

 

JavaScript (ajax_id.js)

변수 request를 보면 JSON형식으로 값을 받게 되어있다.

 

JSP

JSON형식을 사용하기 위하여 라이브러리 말고도

<%@ page import="com.google.gson.Gson" %> 

 

 

현재 DB와 연동 한것이 아니기 때문에 기본값을 설정하여 값 비교

 

아이디 중복

 

---

 

예제2)

HTML

2개의 값을 받아 곱을 연산 할 것이다.

 

JavaScript

앞에서 했던 코드와 크게 달라진 점은 없다

 

먼저 입력된 값을 저장 받을 변수를 선언하고,

 

마찬가지로 JSON형식을 사용하여 데이터를 JSP로 넘긴다.

이때의 데이터는 변수에 저장된 값을 넘기게 된다. -> val( ) 

 

JSP

 

결과창

 

** 자바스크립트 오류로 경고창이 출력이 되지 않았는데 보니까 자바스크립트 경로 설정이 잘못되어있다...

 

ajax_multiply.js는 js 폴더 내에 있으니 경로를 ./js/ajax_multiply.js로 수정해야한다