220224 jquery 유효성 검사, Ajax
* 유효성 검사 (jquery 사용하는 이유 같은.. 그런거)
- 초반에 <script src="http://code.jquery.com/jquery-latest.js"></script> 붙여서 jquery 가져옴
- value값 구해 변수에 저장할 때, .trim()을 이용해 문자열 양쪽의 공백을 제거해줌
---> var name=$.trim($("#name").val());
- form에 대한 유효성 검사를 할 때, submit 버튼을 누르면 전체적으로 유효성 검사를 할 수 있도록 함
---> $("form").submit(function(){ if(){}, if(){}, ... });
- 유효성 검사 시, 조건문 내부에 return false를 입력해 검사에 걸린 시점에서 다시 폼으로 넘어가게 함
---> if(name==""){ $("name").focus(); return false; }
- ID/PW의 정밀한 조건이 필요하다면 정규 표현식 사용!
---> 정규식.test(비교할 값) : 정규식과 비교해 식의 조건과 맞으면 true, 맞지 않으면 false
---> 정규 표현식(pattern) 형식 : /^ [~~~조건~~~] $/ (문자열 시작:^ 종료:$)
- select의 경우, null 값을 가진 옵션을 하나 만들어두고(selected 상태) $("#job").val()=="" 인 경우에 대한 검사를 진행
- radio의 경우 $("#man").is(':checked')==false && $("#woman").is(':checked')==false 조건으로 검사 진행
- 체크박스 두개 이상 선택해야 하는 검사를 할 때
if($("input:checkbox[name='hobby']:checked").length<2){ } <--- 이거 쓰기
input에서 name=hobby인 checkbox 중에 checked인 것만 가져올거고 그 갯수(length)가 <2임
* Ajax (Asynchronous JavaScript+XML) : JavaScript와 XML을 이용한 비동기 통신처리를 구현하는 기술
: JavaScript로 웹 페이지 전체를 다시 읽지 않음(비동기적 통신). 서버와 데이터를 주고 받는 경우 사용
-> 서버에서 데이터를 가져와 페이지 전체의 갱신(refresh)없이 특정 부분만을 변경하는 것이 가능
--> 페이지 일부분만 갱신- 처리 속도 향상, 사용성 증가!
- jQuery Ajax 부가 메소드
★ $.ajax() : ajax 요청을 설정하고 제어
$.get() : get 방식으로 Ajax 수행 (받음)
★ $.post() : post 방식으로 Ajax 수행 (데이터 보냈다 +@로 돌려받음)
$.getJSON() : get 방식으로 Ajax 수행 -> JSON 데이터를 가져온다
$.getScript() : get 방식으로 Ajax 수행 -> Script 데이터를 가져온다
★ $(selector).load() : Ajax를 수행해서, 선택자(셀렉터)에 load한 파일(or문자열)를 가져옴
1. $(selector).load()
- 문서 전체를 가져오기
$('#message1').load('menu.html'); //menu.html의 문서 전체를 읽어옴
- 문서의 부분만 가져오기
$('#message1').load('menu.html li'); //띄어쓰기=종속관계. menu.html의 <li>태그 부분만 읽어옴
2. $.ajax({ }) : ajax 요청을 설정하고 제어할 수 있도록 jQuery에서 제공하는 유틸리티 함수
01. 함수를 실행할 때 옵션으로 URL값(뭐든)을 지정하면 해당 URL서버로 Ajax 요청
02. 요청 성공 시, success 옵션에 지정한 콜백함수(function(data)) 호출
03. 서버로부터 응답받은 데이터 ---> 콜백함수의 매개변수(function(data))로 전달
04. 서버에서 반환되는 데이터의 형식에 따라 다르게 동작 ---> date type 옵션을 지정해야 함
- 형식
$.ajax({
url : "전송 페이지", //반드시 표기
type : "전송 방식(get, post방식), //생략 가능
data : "전송할 데이터", //쓰면 좋지만 생략 가능
dataType : "요청한 데이터 타입("html","xml","json","text"), //생략 가능
success : function(result){ //써야함 당연함 이거 때문에 ajax 갈김
전송 성공하면 실행될 문장;
}
});
- 문서 전체를 가져오기
$.ajax({
url:'menu.html', // 서버의 불러올 파일명
dataType:"html",
success: function(data){ //서버로부터 응답받은 데이터를 콜백함수의 매개변수로 전달
$('#message1').html(data); //콜백함수로 전달된 data를 id=message1인 엘리먼트에 설정
}
});
- 문서의 부분만 가져오기
$.ajax({
url:'menu.html',
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달
$('#message2').html($(data).find('li')); // menu.html문서에서 <li>를 찾아서(find) id=message2인 엘리먼트에 설정
}
});
3. $.get() : xml 파일을 불러옴
01. 함수의 첫번째 매개변수에는 서버의 URL 주소를 지정
02. 함수의 두번째 매개변수인 콜백함수(data)를 이용해 서버에서 보내온 XML 형식의 데이터를 받음
$.get('item.xml', function(data) {
$(data).find('item').each(function() { // 서버에서 얻어온 data에서 item태그를 찾음
// 근데? item 태그가 6개죠?
var $item = $(this); //그 중 현재 <item>에 포인터를 위치한게 this인 것임
//현재 처리중인 <item> 태그에 접근한 상태 = $(this)를 jQuery 객체에 저장함
$("#treeData").append("<tr>" + "<td>"
+ $item.attr("id") + "</td>" + "<td>"
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
}); //현재 접근중인 item태그의 속성값(id, name)을 attr로 불러와 추가하고
}); //item태그의 하위 태그(price, desc)를 찾아서(find) 추가함
//그리고 이 과정은 each()함수로 끝까지 반복됨
//다음 item 태그값에 접근-> $(this) -> $item에 저장 -> 값 불러와 추가 과정이 반복됨!
- 결과
* XML파일
- 세팅: <?xml version="1.0" encoding="UTF-8"?>
- 주의할 점 : 루트 엘리먼트 (코드 가장 바깥에 위치한 태그)는 파일에 하나만 존재해야 함!
