반응형

* 개요: 서버단은 View를 반환하고 반환하는 View는 AbstractXlsxView를 상속받은 클래스의 객체를 반환하도록 되어 있는 엑셀저장이 form.submit이나 window.location.href로 잘 동작하는데 로딩바를 추가할 필요가 있어서 ajax 호출로 변경하는 경우 참고하면 된다. 

$.ajax({
	type: "GET",
    url: "your URL",
    data: "your param",
    contentType: "application/json",
    xhrFields: {
    	responseType: "blob"
    },
    // xhrFields 필드는 ajax 공식 문서에 보면 나온다.
    // https://api.jquery.com/jQuery.ajax/
    // blob은 Binary Large Object 그림, 오디오, 멀티미디어 오브젝트를 뜻한다.
    success: function (data, status, xhr) {
    	if (xhr.status == 200) {
        	let blob = new Blob([data], { type: 'application/vnd.ms-excel' });
            let link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            let disposition = xhr.getResponseHeader("Content-Disposition");
            // 서버단에서 response header에서 filename을 넘겨주면 클라이언트에서 응답받아 사용한다.
            let filename = decodeURI(disposition.substring(23, disposition.indexOf('";charset="UTF-8"')));
            // 자르고 버무려서 파일명을 만든다.
            link.click();
            
            window.URL.revokeObjectURL(link.href);
            // mdn web docs를 보면 "URL.revokeObjectURL() 정적 메서드는 이전에 URL.createObjectURL()을 통해 
            // 생성한 객체 URL을 해제합니다" 라고 설명되어 있다.
        }
        // 본인 환경에 맞게 처리
    },
    error: function (err) {
       // 본인 환경에 맞게 처리
    }

* 주저리: 스프링 공식 문서를 아무리 찾아봐도 AbstractXlsxView 공식 예제를 찾을 수가 없다. 시간이 너무 지나서인가.... ajax 공식 doc은 왜이렇게 뭐가 없는지.... 믿을건 쳇gpt뿐이다... 쳇gpt가 출현하니 샘플 코드를 너무 잘 보여줘서 이런 블로그를 운영할 필요가 있는지 회의감이 들기도 한다..........

반응형
반응형

 · 개요 : js에서 ajax 호출이 정상적인데도 서버에서 200에러로 발생되는 경우

 · 방법 : 서버에서 반환하는 data의 type과 일치하는지 확인한다.

 

   $.ajax({

      dataType: "text",

      ...

   });

 

  ☞ json, string, text... 서버에서 반환하는 값을 확인 후 일치 시키면 된다.

 

 · 도움을 받은 사이트 : http://hclee2575.tistory.com/311

반응형
반응형

동일한 name으로 이루어진 select box의 text 값 구하기


var foo = [];

$("select[name=cons_cau] option:selected").each(function(i, selected){

if(i==0) console.log($(selected).text());

else if(i==1) console.log($(selected).text());

});


도움을 받은 곳 : http://marcgrabanski.com/jquery-select-list-values/

반응형
반응형

팝업창에서 스크롤을 내렸을 때 input 박스 수정 알리기 기능

스크롤을 하단으로 내렸을 경우 특정 input box에 배경색이 잠깐 깜빡였다가 사라지는 기능을 만들어 보았다~

function setBorderColor(){
  $("#crime_top").css('background-color','#99CCFF');
  $("#crime_bottom").css('background-color','#99CCFF');
 }
 function defBorderColor(){
  $("#crime_top").css('background-color','#FFFFFF');
  $("#crime_bottom").css('background-color','#FFFFFF');
 }

 function timer(){
  var count = 0;
  var timer = setInterval(function(){
   count = count +1;
   setBorderColor();
   if(Number(count)==1||Number(count)==3){
    defBorderColor();
   }else if(Number(count)==5){
    clearInterval(timer);
    defBorderColor();
   }
  }, 300);
 }

 

$(document).ready(function(){
    
  var switchNotice = true;  
  $(window).scroll(function(){
   var position = $(window).scrollTop();
   //console.log(position);
   if(position > 200 && switchNotice){
    timer();
    switchNotice = false;
   }
  });

});

 

도움을 받은 곳 : http://findfun.tistory.com/466

http://eversong0723.blogspot.kr/2016/04/scroll.html

http://seongilman.tistory.com/297

반응형
반응형

<a href="#a" class="btn-trash" title="삭제"><span class="text-hidden">삭제</span></a>


$(".btn-trash").click(function(){

var trashParam = $(this).parent().attr('id');

$('#'+ trashParam).hide();

});


[출처:stackoverflowhttp://stackoverflow.com/questions/10260667/jquery-get-parent-parent-id

반응형
반응형

var checkDev = [];

$("input[name='pjSkillDev']:checked").each(function(i) {

checkDev.push($(this).val());

});

$("#displaySkills").val(checkDev);


참고 사이트 : [무중력고기님 블로그] http://zero-gravity.tistory.com/241

반응형
반응형

$('input[name="gubun"]').change(function(){

if($(this).val() == 1) {

console.log('1');

}else {

console.log('2');

}

});

반응형
반응형

--- <html> ---

<select id="selectInfo" name="selectInfo">

<option value="test1">abc</option>

<option value="test2">def</option>

</select>


--- <js> ---

function resultFormatter(cellvalue, options, rowObject){

var result = "";

$('#selectInfo > option').each(function(){

if(cellvalue.toString() == $(this).val(){

result = $(this).text();

}

});

return result;

}


function에 cellvalue, options, rowObject가 들어가 있는 것은 jqGrid에서 사용하는 것이기 때문에 들어가 있는 것이고 상황에 맞게 응용해서 사용하면 도움이 될 것으로 예상됩니다.

반응형
반응형

보내려는 배열은

var tempArray = new Array();

tempArray.push('a_data');

tempArray.push('b_data');


에이작스는

$.ajax({

type: ...

dataType: ...

url: ...

contentType: ...

data: {

'어쩌고': 저쩌고,

~~~~

'tempArray':tempArray

},

success ......

});


이런식으로 넘겨버리면 

콘솔에서는 

심각: Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.NumberFormatException: For input string: ""] with root cause

java.lang.NumberFormatException: For input string: ""


웹에서는 

블라 블라 ~~ &tempArray%5B%5D=aaa&tempArray%5B%5D=bbb 500 (Internal Server Error)


난리 부르스를 쳐댄다.

자세히 보면 원래 보내고자하는 tempArray=aaa 가 tempArray%5B%5D=aaa 와 같이 인코딩이 깨진 것을 확인 할 수 있다.


[해결방법] ajax 호출 전

$.ajaxSettings.traditional = true;

코드를 넣어주고 실행해보면 인코딩이 정상적으로 넘어가는 것을 확인 할 수 있다.


[출처 및 이유 확인] http://marobiana.tistory.com/108 by 신매력

반응형
반응형

Ajax로 데이터를 넘길 때


GET 방식을 사용할지 POST 방식을 사용할지 GET 방식의 글자수 제한에 대해 막연히 256바이트, 2048 바이트인지 아리송한 경우가 있다.


이럴 때 참고할 만한 좋은 사이트 발견 !!


http://brainage.egloos.com/4323903

[출처] 상식의 오류 - get방식의 글자수 제한은 256자가 아니다 by 천하귀남

반응형

+ Recent posts