Ajax & jQuery 8일차

MJLupin

8. jQuery의 json,xml파일 처리방법 및 jQuery UI작성법

1. xml(순수 xml, jsp(xml)) ->2.json->jQuery 처리
05ajax->getXml.jsp
trimDirectiveWhitespaces=”true” (2.3버전)
=> 파일을 불러올때 공백이 있으면 공백을 제거하고 불어오기 위한 옵션

getXml.jsp—>04$.ajax()2.html

getxml 04ajax

04ajax_result

item.xml —>05$.get().html

item 05get

05get_result

06json.html –> 문자열로 된 자바스크립트구문을 eval의 매개변수로
전달->자바스크립트구문을 실행하게 된다.

06json 06json_result

07$.ajax(json).html(json파일을 불러와서 출력) —>item2.json

07ajax(json) item2

07ajax(json)_result

실직적으로 DB에 접속->데이터를 json표기법으로 출력

getBoardJson.jsp

getboardjson getboardjson_result
08$.getJson().html—item2.json

08getjson 08getjson_result
09$.getScript().html—test.js

09getscript testjs

09getscript_result

 

plugin을 설치(확장팩)=>eclipse->MyEclipse(개발>미니프로그램)
DB Plugin,Spring plugin을 설치->환경설정

JQueryUiTest->프로젝트명(jqueryui.com)
library를 다운로드을 받아야함
일반ui를 붙어넣음

jquery_ui
JQueryUiTest
         |
         -WebContent
                  |
                  -css->21개정도의 스타일정도
                  |
                  -js->jQuery-2.1.1.js + jQuery-ui.js
                  |
                  -button=>checkbox.jsp

html5

html5
checkbox.jsp(html5)

checkbox checkbox_result

icon.jsp(http://jqueryui.com/themeroller/->아이콘은 여기서)

icon  icon_result

radio.jsp

radio radio_result