'JQUERY'에 해당되는 글 4건

jquery ajax json mvc 스프링 post 

jquery 로 스프링 통신시 컨트롤로 선언 방법과 리턴방법 jquery에서 사용법등을 정리해보겠습니다. 

일단 스프링 에서 컨트롤러 선언입니다. 저는 사과로 선언을 해보겠습니다. 

@RequestMapping(value = "/apple", method = RequestMethod.POST, consumes = "application/json")
	public @ResponseBody CommonData apple(@RequestBody CommonData dto) {
		CommonData result_data = new CommonData();
		String apple = dto.get("apple","");
		result_data.put("result",apple);
		return result_data;
	}

@RequestBody 해쉬맵 변수명 으로 하면 강종항목들이 키와 값으로 분리되어  들어갑니다. 

CommonData 를 궁금해 하시는분들이 많으셔서 해쉬맵인데 전자정부프레임워크 처럼 map데이터사용시 쓸려고 재정의 해 놓은것 뿐입니다. 

public class CommonData extends LinkedHashMap {
	public void put(String key, Object value){
		super.put(key, value);
	}

	public String get(String key) {
		if(super.get(key)!=null)
		{
			return super.get(key).toString();
		}
		else
		{
			return null;
		}		
	}
	public String get(String key,String value)
	{
		if(super.get(key)!=null)
		{
			return super.get(key).toString();
		}
		else
		{
			return value;
		}	
	}
	public Object getObj(String key) {
		return super.get(key);
	}
}

거기에 @ResponseBody 해주면 해쉬맵이 json형태로 변화되어 응답합니다. 안에 리스트데이터나 뭐 각종데이터를 넣어서 보내어도 계층화되어 전송이 됩니다. 

ajax소스인데요. 

		$.ajax({
            url : '${pageContext.request.contextPath}/jqueryajax/apple',
            type : 'post',
            contentType: 'application/json',
            data : JSON.stringify ({'apple':'100','banana':200}),
            dataType : 'json',
            success : function(data){
                // 통신 성공시 실행....
            	data = data.RESULT;
            },
            error : function(xhr,status,error){
                // 통신 실패시 실행....
                // alert(xhr.status + " " + xhr.statusText);
                // alert("통신실패 : ["+xhr.status + " " + xhr.statusText+"]");
                alert("데이터 불러오는데 실패했습니다.");
            },
            complete : function(data){
                // 통신 실패했어도 최종 완료시 실행...
                // alert('complete');
            }
        });

이런식으로 호출해서 사용하시면 됩니다. 

var selarrrow =  jQuery("#그리드명").jqGrid("getDataIDs"); //그리드의 id값들을 구해옴.

for (var key in selarrrow) //자 순서대로 key 그리드 id값을 넘겨주고

{

var rowdata = jQuery("#그리드명").getRowData(key); //key에 맞는 로우값들을 가져옴.

if(rowdata.TEL==null) //로우에 TEL 항목이 널이 아닌지 체크.

{

continue;

}

rowdata.TEL = rowdata.TEL.replace(/ /gi," ");//공백제거 //난 공백제거를 위해서 이거씀.

 jQuery("#그리드명").setCell(key, "TEL", rowdata.TEL); //특정 셀값을 변경하여줌.

}

특정 열이나 행의 데이터 값 특정셀 값을 JQUERY로 변경하고 싶을때. 

XXX-XXXX-XXXX형식의 입력을 받았을때

정규식 검사를 하고 싶었다. 

문자를 넣어본건 아니지만.. 숫자와 - 조합일땐 잘 작동했음.. 

    var rgTel = /(\d{2}|\d{3})[-](\d{4}|\d{3})[-]\d{4}$/;

if (!rgTel.test($("#PHONE").val()))

{

         Alert("전화번호 xxx-xxxx-xxxx형식으로 입력해주세요.");

         $("#PHONE").focus();

         return false;

}

페이지 시작시 시작부분.

$(document).ready(function(){   

    블라블라. (필요한 함수들 호출)

 });

jquery는 함수를 연결해서 사용가능.

$("#id명").val().toUpperCase().substring(0,5).toLowerCase();

html페이지내에서 특정 element선택하는방법

태그로 찾기.

$("태그명") -아무것도 안붙임. 

id로 찾기

$(#"id명") - #을 붙임.

class로 찾기. 

#(".클라스명") -클라스명 앞에 .을 붙임.

복수의 element 찾을수 있음

$("태그명,태그명,태그명") - 이런식 id나 class도 될듯. 

필터도 쓸수 있음

$("태그명:first").hide(); -첫번째 태그를 숨긴다. 
필터는 차후 정리가 필요할것 같고. 자 다음.. 
현재페이지의 태그를 탐색하면서 번호를 매김 
var i = 1;$("태그명").each(function(){     
    $(this).text(i + ". " + $(this).text()); 
    i++; 
});
-------
$("태그명").each(function(){
    태그명이 동일한것을 순서대로 호출함. 
안에서 사용할땐 $(this)로 접근함. 
}

------------------------------

$("태그명").eq(2).hide(); -검색된 태그의 3번째(0,1,2,3이런식으로 증가) 숨김

$("태그명").slice(2,5).hide(); - 검색된 태그중에서 3~5번째를 감춤.

--------------------------------

next() 함수는 현재 element의 다음 elemen를 접근할수 있음. 

<input type=text class=validate><span></span> 

function validateForm() 
{ 
    $(".validate:text").each(function(){ 
    if ($(this).val()=="") 
        $(this).next().html("이 입력박스를 채우세요"); 
}); 
}