연동법은 이전 강좌를 참조 하시면 되겠습니다.

2014/10/08 - [웹개발강좌/jQuery] - jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기

우선적으로 많이 사용되는 id,class,태그를 이용한 셀렉터에 대하여 알아보도록 하겠습니다.

jQuery의 코드는  $(셀렉터) 또는 jQuery(셀렉터) 구조로  시작이 됩니다.

id 셀렉터 : $("#셀렉터") = document.getelementbyid("셀렉터")

class 셀렉터 : $(".셀렉터") = document.getElementsByClassName("셀렉터")

태그 셀렉터 : $("태그명") = document.getelementsbytagname("셀렉터")

상단에 id,class,tag 별 셀렉터를 이용하여 태그내에 결과값을 출력해보는 예를 들어보겠습니다.

html페이지를 하나 생성 후 BODY 태그내에 다음 코드를 추가 합니다.

<div id="id_selector">아이디값으로알아보는 셀렉터</div>
<div class="class_selector">클래스값으로 알아보는 셀렉터</div>
<span>태그로 알아보는 셀렉터</span>

다음은 스크립트 코드를 작성해보도록 하겠습니다.

물론, jQuery 파일이 include 되있어야 하겠죠?

그리고 아직은 정확하게 아실필요는 없지만 태그에 감싸져 있는 내용들을 알기위해서는 

$(셀렉터).text() 라는 함수를 적용하시면 되겠습니다.

$(function(){
        //태그 id가 id_selector인 태그로 감싸져있는 문자열찾기
	var id_selector = $("#id_selector").text();
        //태그 class가 class_selector인 태그로 감싸져있는 문자열찾기
	var class_selector = $(".class_selector").text();
        //span 태그로 감싸져있는 문자열찾기
	var tag_selector = $("span").text();
	alert("셀렉터(id)값 : " + id_selector);
	alert("클래스(class)값 : " + class_selector);
	alert("태그(tag)값 : " + tag_selector);
});

간단하게 셀렉터를 이용하여 각 태그내에 존재하는 텍스트내용을 

ALERT 경고창에 띄워주는 기능을 구현한  코드를 작성해보았습니다.

실행결과 각 태그안에 존재하는 결과값들을 

정상적으로 alert을 통하여 출력되었습니다.

한페이지에 여러개의  같은 태그 및 동일한 클래스명을 가지고 작업해야 하는 부분이 존재하는데 

이 부분은 jQuery에서 사용되는 함수를 몇가지 익힌다음에 

이어서 진행 하도록 하겠습니다.

by 개발로짜

이번 내용은 리다이렉트 전송시 

parameter를 URL에 붙여서 전송하기 싫어하는 분들을 위한 포스팅입니다.

Spring3 에서 제공하는 RedirectAttributes를 사용하면 

redirect post 구현이 가능합니다.

하지만 일회성입니다. 

새로고침하면 날라가는 데이터이므로 

사용목적에 따라서 사용/불가능 판단을 잘 하셔야 할거 같습니다.

컨트롤러에 일반 GET방식 테스트를위한 컨트롤러를 만들도록 하겠습니다.

/**
 * redirect페이지로 넘기기 위한 컨트롤러
 * @return
 */
@RequestMapping("/redirectpage")
public String redirectpage(){
	return "redirect:/herepage?key1=value1&key2=value2";
}
	
/**
 * redirect되는 컨트롤러
 * @return
 */
@RequestMapping("/herepage")
public String herepage(@ModelAttribute(value="vo") RedirectVo vo){
	return "herepage";
}

herepage 컨트롤러에 return 페이지인 herepage.jsp파일을 views 디렉토리내에 생성 후 

다음과 같이 body 태그에 코드를 추가해보도록 합니다.

<h2>Redirect 페이지</h2>
key1 :: ${vo.key1 }<br/>
key2 :: ${vo.key2 }

리다이렉트 테스트를 위하여 호출을 해보도록 하겠습니다.

http://localhost:포트번호/redirectpage 실행결과

위처럼 화면에 value값이 화면에 출력이 되었습니다.

하지만 브라우저 URL뒤에 PARAMETER값들이 붙어있습니다.

브라우저내에 parameter값이 안붙게끔 RedirectAttributes를 이용해보도록 하겠습니다.

다음 컨트롤러를 추가 해보겠습니다.

/**
 * redirect 신규페이지로 넘기기 위한 컨트롤러
 * @return
 */
@RequestMapping("/redirectnewpage")
public String redirectnewpage(RedirectAttributes redirectAttributes){
	Map<String, Object> map = new HashMap<String,Object>();
   	map.put("key1", "value1");
   	map.put("key2", "value2");
   	redirectAttributes.addFlashAttribute("vo", map);
	return "redirect:/herepage";
}

RedirectAttributes의 addFlashAttribute메서드에 key/value로 웹페이지에 값을 넘겨줄수 있지만 

하나의 key값으로 넘겨주어야 하므로 여러개의 값을 페이지로 넘겨 줄 경우

 list나 map 형태의 객체를 value로 담아서 넘겨주면 되겠습니다.

RedirectAttributes를 이용하여 최초 GET방식으로 REDIRECT 해줬던 RETURN 페이지와 동일합니다.

herepage 컨트롤러의 코드일부를 변경하보도록 하겠습니다.

herepage parameter인 "@ModelAttribute(value="vo") RedirectVo vo" 코드를 삭제해줍니다.

삭제가 되면 다음처럼 코드가 변경되겠습니다.

/**
 * redirect되는 컨트롤러
 * @return
 */
@RequestMapping("/herepage")
public String herepage(){
	return "herepage";
}

이제 신규 리다이렉트 컨트롤러를 호출해보도록 하겠습니다.

http://localhost:포트번호/redirectnewpage 실행결과

위와같이 URL에 PARAMETER가 붙지않고 정상적으로 웹페이지에 결과값을 출력하였습니다.

하지만 새로고침을 하게된다면?

위와같이 빈값으로 나오게 됩니다.

필요여부에 따라 사용하시면 되겠습니다.

by 개발로짜

Spring3 에서 추가된 기능중 하나인 @Pathvariable 어노테이션에 대하여 포스팅 하고자 합니다.

말그대로 URL 경로에 변수를 넣어주는 기능입니다.

컨트롤러에서 사용법은 다음과 같습니다.

/**
 * Pathvariable 예제
 * @return
 */
@RequestMapping("/page/{var}")
public String page(@PathVariable String var){
	String returnUrl = "";
	if(var.equals("one")) {
		returnUrl = "page1";
	} else if(var.equals("two")) {
		returnUrl = "page2";
	}
	return returnUrl;
}

RequestMapping의 URL 정의 부분과 Method 내의 Parameter 부분에 

정의를 하여 사용이 가능합니다.

연결관계는 

처럼 관계를 가져야 합니다.

상단 코드에서 return값으로 정해준 url 페이지를 2개 생성 해보도록 하겠습니다.

page1.jsp 페이지코드

<h2>PAGE1.JSP</h2>

page2.jsp 페이지코드

<h2>PAGE2.JSP</h2>

그럼 각 페이지별 출력을 위하여 실행을 해보도록 하겠습니다.

http://localhost:포트번호/page/one 호출 결과

http://localhost:포트번호/page/two 호출 결과

실행결과 정상적으로 @pathvariable 어노테이션을 이용하여 

변수로 구분된 경로에 따른 returnURL 페이지 출력이 나왔습니다.

이 어노테이션을 사용한다면 한페이지로 여러개의 동일한 화면을 구분하게끔 구현이 가능할 것입니다.

이어서 일반 GET 방식과의 차이점에 대해서 비교를 해보도록 하겠습니다.

이번코드에서는 별도의 RETURN 페이지를 생성하지 않고 콘솔에서 데이터를 받기만 하도록 하겠습니다.

2가지 방식의 컨트롤러를 만들어 봅니다.

/**
 * GET방식 컨트롤러
 * @param key1
 * @param key2
 */
@RequestMapping("/resultByGet")
public void resultByGet(String key1, String key2){
	System.out.println("key1::"+key1);
	System.out.println("key2::"+key2);	
}
	
/**
 * Pathvariable방식 컨트롤러
 * @param key1
 * @param key2
 */
@RequestMapping("/resultByPath/{key1}/{key2}")
public void resultByPath(@PathVariable String key1, @PathVariable String key2){
	System.out.println("key1::"+key1);
	System.out.println("key2::"+key2);
}

위 코드는 같은 결과를 출력시키는 코드입니다.

단, 호출방식만 다를뿐...

각각 실행을 해보도록 하겠습니다.

GET방식호출 : http://localhost:포트번호/resultByGet?key1=a&key2=b

Pathvariable방식호출 : http://localhost:포트번호/resultByPath/a/b

다른방식이지만 같은 결과값이 출력되었습니다.

원하는 방법에 따라 사용하시면 되겠습니다.

by 개발로짜